CODEWITHSUNDEEP
phpajaxcordovaimage-uploadingphonegap
Abhishek kumar Sharma
Abhishek kumar Sharma

Reputation: 41

how to upload image on server using ajax in cordova build

Can anybody provide the complete ajax and (php or asp) server side code to upload the image directly from simple html to online server. Actually I'm trying to upload image on server using phonegap cli

<form id="uploadaadhar" action="http://server_url" method="post">
    <input type="hidden" name="userid" >
    <br><label>Aadhar Number</label>
    <br><input type="number" name="aadhar" class="form-control" placeholder="XXXX XXXX XXXX">
    <br><label>Choose File</label>
    <br><input name="files[]" class="form-control" type="file" />
    <br><label>PAN Number</label>
    <br><input type="number" name="pan" class="form-control" placeholder="XXXX XXXX XXXX">
    <br><span class="ak-text-indigo">Leave Pan Card Field Blank if you do not want to update your pan card</span>
    <br><br>
    <input type="submit" value="Upload" class="ak-btn ak-blue">
</form>

<script>
    $("[type='hidden']").val(localStorage.getItem("userid")); 
    $("#uploadaadhar").ajaxForm(function(data){

        if(data !== ""){

            $("[type='submit']").val(data);
        }

    });
</script>

Upvotes: 2

Views: 1666

Answers (3)

Abhishek kumar Sharma
Abhishek kumar Sharma

Reputation: 41

    <form id="uploadaadhar" action= "http://app.365valueservices.com/365APP/settings.php" method="post">
       <label>Aadhar Number</label>
          <input type="number" name="aadhar" class="form-control" placeholder="XXXX XXXX XXXX">`enter code here`
       <label>Choose File</label>
          <input name="files[]" class="form-control" type="file" />
          <input type="submit" value="Upload" class="ak-btn ak-blue">
   </form>

Javascript

  <script> $("#uploadaadhar").ajaxForm(function(data){
    if(data !== ""){
      $("[type='submit']").val(data);
   } });
  </script>

Upvotes: 1

Abhishek kumar Sharma
Abhishek kumar Sharma

Reputation: 41

if(isset($_FILES['files']))
{
    if(is_array($_FILES))   
    {  
        foreach ($_FILES['files']['name'] as $name => $value)  
        {  
            $file_name = explode(".", $_FILES['files']['name'][$name]);  
            $allowed_ext = array("jpg","JPG", "jpeg", "JPEG", "png", "PNG", "gif","pdf","docx","doc");  
            if(in_array($file_name[1], $allowed_ext))  
            {  
                $new_name = md5(rand()) . '.' . $file_name[1];  
                $sourcePath = $_FILES['files']['tmp_name'][$name];  
                $targetPath = "../httpdocs/docs/".$new_name;  
                //$targetPath = "upload/".$new_name;  

                move_uploaded_file($sourcePath, $targetPath);

                $filepath = "../docs/".$new_name;
                $sql = "update usertbl set aadhar = '".$_POST['aadhar']."' where userid = ".$_POST['userid'];
                sqlsrv_query($conn,$sql);
                if($_POST['pan'] != ""){
                    $sql2 = "update usertbl set panno = '".$_POST['pan']."' where userid = ".$_POST['userid'];
                    sqlsrv_query($conn,$sql2);
                }

                $stmt  = sqlsrv_query($conn,"select * from user_meta where userid = ".$_POST['userid']." and metakey = 'aadharpath'");
                $row_count = sqlsrv_has_rows($stmt);
                if($row_count === false){
                    sqlsrv_query($conn,"insert into user_meta(userid,metakey,metavalue,Active) values (".$_POST['userid'].",'aadharpath','".$filepath."',1)");

                }
                else
                {
                    sqlsrv_query($conn,"update user_meta set metavalue = '".$filepath."' where metakey='aadharpath' and userid=".$_POST['userid']);
                }

                sqlsrv_query($conn,"insert into useractivity values(".$_POST['userid'].",'You had updated your aadhar details','" .date("d-m-Y H:i:s"). "',1)");

                echo "Updated Successfully";

            }            
        }  



    } 
}

Upvotes: 0

Bablu
Bablu

Reputation: 459

Here is a sample demo for uploading image. Here data is image and other data that you want to send using post. url is where you want to post data.

 <html>
   <form>
     <input id="file-input" type="file" name="files" accept="image/*" />
     <button type="button" onclick="uploadImage()">upload</button>
   </form>
 </html>

and ajax function

function uploadImage(){
 url = "your web url where u want to upload image";
 var formdata = new FormData();  
 formdata.append( 'files', $('#file-input')[0].files[0]);
 $.ajax({
   type: "POST",
   url: url,
   data: formdata,
   processData: false,
   contentType: false,
   type: 'POST',
   success: function(msg){
       // on success
   },
   error: function(){
       alert("failure");
   },
   async: false
 });
}

Upvotes: 1

Related Questions