通过Ajax的表单上传图像

Question

I have a data in a form which is opening in a popup. which is editable by the users. All the data has been edited, except the image. it is giving me an error of "undefined index file in c/xamp/htdocs/website/file.php on line 35"

my ajax call is :
function updat(id){
$.ajax({
        url:'file.php?upd='+id,
        success:function(response){

var img = $("#file").val();
var marlas = $("#marlas").val();
var bath= $("#bath").val();
var bed = $("#bed").val();
var house_no = $("#house_no").val();
var address = $("#address").val();
var price = $("#price").val();
var ids = $("#ids").val();
var dataString = 'files='+ img + '&marlas1='+ marlas + '&bath1='+ bath + '&bed1=' + bed + '&house_no1=' + house_no + '&address1=' + address +  '&price1=' + price +'&ids1=' + ids;

$.ajax({
type: "POST",
url: "file.php",
data: dataString,
success: function(result){
document.getElementById("update");
alert(result);

window.location.reload();
}
});
}
});
}

my file code is :

if(isset($_POST['ids1'])){
$ids= $_POST['ids1'];
$file= $_POST['files'];
 $target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["files"]["name"]);
print_r($target_file); exit();
  $file=$_FILES["files"]["name"];
 $fsize=$_FILES["files"]["size"];
   $ftype=$_FILES["files"]["type"];
    $tmp_name=$_FILES["files"]["tmp_name"];
    $imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);
    if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
}
    move_uploaded_file($_FILES["files"]["tmp_name"], $target_file);
$marlas= $_POST['marlas1'];
$bath= $_POST['bath1'];
$bed= $_POST['bed1'];
$house_no= $_POST['house_no1'];
$address= $_POST['address1'];
$price= $_POST['price1'];
$q= mysql_query("update property  set img='$file', marlas='$marlas', bath='$bath', bed='$bed', house_no= '$house_no', address='$address', price='$price' where id='$ids'"); 
if(!$q){echo 'error'.mysql_error(); } 
    else echo "property updated";   
}

Answer 1

You can create a Function to handle file uploads and reuse it. Below is the code illustrating the same. Also the function has a callback that is called on success of the upload.

 var Url = "YourApplicationUrlToPostTheFile"; //file.php
    AjaxFileUpload($('input[type="file"]')[0], Url, function (response) {
        alert('File Uploaded, And the response is ' + response);
       // do something after the image is uploaded successfully;
    });

And the Ajax function to upload the file .

 function AjaxFileUpload($element, Url, callback) {

    var formdata = new FormData();
    var totalFiles = $element.files.length;   

    if (totalFiles > 0) {
        for (var i = 0; i < totalFiles; i++) {
            var file = $element.files[i];

            formdata.append("FileUpload", file);
        }

        $.ajax({
            type: "POST",
            url: Url,               
            data: formdata,
            contentType: false,
            processData: false,
            success: function (result) {
                callback(result);
            },
            error: function (error) {
                console.log("File Upload Failure");
            }
        });       
    }    
}

Let me know if you have any issues.