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

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(); }); });

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

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Linked

Related