Upload image using jQuery, AJAX and PHP

Question

I'm trying to choose an image from PC/mobile and upload it to the server on one button click but for some reason I can't grab the value (name) of chosen image - $_FILES["pictureCapture"]["name"] inside PHP page. I can do it easily using two buttons, one to browse for the image on my device and second to upload it but I really need one button click for these two procedures.

My source code:

HTML

<form action="" method="post" enctype="multipart/form-data" onsubmit="test3()">
    Select image to upload:
    <input type="file" name="pictureCapture" id="pictureCapture" accept="image/*; capture=camera" style="visibility:hidden;" onchange="test2();"/>
    <button type="button" id="uploadPhotoFromCamera" onclick="test();">Choose an image</button>
    <input id="uploadPhotoToServer" type="submit" value="Upload Image" name="submit" style="visibility:hidden;"/>
</form>

jQuery + AJAX

function test(){  
   event.preventDefault();
   $("#pictureCapture").trigger("click");
}

function test2(){   
    $("#uploadPhotoToServer").trigger("click");
}

   function test3(){
      event.preventDefault();

      var formData = new FormData();
      var fileInput = document.getElementById('pictureCapture');
      formData.append(fileInput.files[0].name, fileInput.files[0]);   

      $.ajax({
          url : "upload.php", // Url to which the request is send
          type : "POST", // Type of request to be send, called as method
          data: formData, // Data sent to server, a set of key/value pairs (i.e. form fields and values)
          cache : false, // To unable request pages to be cached
          processData : false, // To send DOMDocument or non processed data file it is set to false
          contentType: 'multipart/form-data',
        success : function(result) // A function to be called if request succeeds
        {
            alert(result);
        }
    });
}

PHP

$target_dir = "uploads/";
$target_file = $target_dir .date('d-m-Y-H-i-s').'-'. basename($_FILES["pictureCapture"]["name"]);
$uploadOk = 1;
$imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);

// Check if image file is a actual image or fake image
if(isset($_POST["submit"])) {
    $check = getimagesize($_FILES["pictureCapture"]["tmp_name"]);
    if($check !== false) {
        echo "File is an image - " . $check["mime"] . ".";
        $uploadOk = 1;
    } else {
        echo "File is not an image.";
        $uploadOk = 0;
    }
}

// Allow certain file formats
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg" && $imageFileType != "gif" ) {
    echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
    $uploadOk = 0;
}

// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
    echo "Sorry, your file was not uploaded.";
// if everything is ok, try to upload file
} else {
    if (move_uploaded_file($_FILES["pictureCapture"]["tmp_name"], $target_file)) {
        echo "The file ". basename( $_FILES["pictureCapture"]["name"]). " has been uploaded.";
    } else {
        echo "Sorry, there was an error uploading your file.";
    }
}

Please could you help me to sort this issue!

@dimis283, well I know it will work the way you suggested but I need to use AJAX in order to display an error or success message inside my html page — Deniss Muntjans
– Deniss Muntjans, Commented Dec 14, 2016 at 14:42
I mean something like this airpair.com/js/jquery-ajax-post-tutorial view the 2 AJAX POST Example, the jQuery way — dimis283
– dimis283, Commented Dec 14, 2016 at 14:48
On a sidenote - do not use getimagesize to check if the file is a valid image file. php.net/manual/en/… — dokgu
– dokgu, Commented Dec 14, 2016 at 14:58

Steven Moseley · Accepted Answer · 2016-12-14 14:55:42Z

1

You need to populate your FormData() with your file data:

var formData = new FormData();
$.each($('pictureCapture')[0].files, function(key, value) {
    formData.append(key, value);
});

Add change your contentType to multipart in your jQuery ajax call:

$.ajax({
    ...
    data: formData, 
    ...
    contentType: 'multipart/form-data',
    ...

edited Dec 14, 2016 at 14:55

answered Dec 14, 2016 at 14:42

Steven Moseley

16.4k4 gold badges43 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Steven Moseley Over a year ago

Did you remove the contentType: false line?

Deniss Muntjans Over a year ago

Yes I did but still nothing!

Steven Moseley Over a year ago

You also forgot to add your file data to the FormData object. Check edits.

Deniss Muntjans Over a year ago

I've got this error now - Uncaught TypeError: Cannot read property 'files' of undefined

Deniss Muntjans Over a year ago

have a look at my updated script, still cant grab the file name :(

|

Jage · Accepted Answer · 2016-12-14 14:42:40Z

0

Why not just submit the form automatically using onchange on the file input? As soon as they select a file, it will submit the image for them. Here is a jsfiddle.

Or as is applies to your situation:

$(document).ready(function(){
    $('#pictureCapture').change(function(){
        this.form.submit();
    });
});

answered Dec 14, 2016 at 14:42

Jage

8,1164 gold badges34 silver badges31 bronze badges

1 Comment

Deniss Muntjans Over a year ago

Fair enough but I need to use AJAX in order to display an error or success message inside my html page

Collectives™ on Stack Overflow

Upload image using jQuery, AJAX and PHP

2 Answers 2

7 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related