How to use FormData in jquery for uploading files? - php

Question

I have html form:
<form enctype="multipart/form-data" id="formUpload">
<input type="file" name="file" />
<button type="submit" id="sub">Click</button>
</form>
My script:
$(function() {
$("#sub").on("click",function () {
var form = $("#formUpload")[0];
var formData = new FormData(form);
$.ajax({
url: 'upload.php',
data: formData,
type: 'POST',
contentType: false,
processData: false,
dataType: 'html',
success: function(data) {
$("#res").html(data);
}
});
});
});
I try to upload file in upload.php, but all is wrong.
How can I get $_FILES variable?

Answer 1

Every time you click on submit button, your page will get refreshed and you won't see any output from this statement $("#res").html(data);. Use event.preventDefault() method to prevent your form from being submitted in the first place. So your Javascript code should be like this:
$(function() {
$("#sub").on("click",function (event){
event.preventDefault();
var form = $("#formUpload")[0];
var formData = new FormData(form);
$.ajax({
url: 'upload.php',
data: formData,
type: 'POST',
contentType: false,
processData: false,
dataType: 'html',
success: function(data) {
$("#res").html(data);
}
});
});
});
And in the backend upload.php page, you can access the uploaded file data using $_FILES, like this:
<?php
if(is_uploaded_file($_FILES['file']['tmp_name'])){
$name = $_FILES['file']['name'];
$type = $_FILES['file']['type'];
$size = $_FILES['file']['size'];
// ...
}
?>