html5 uploader + jquery drag & drop: how to store file data with FormData?
- by lauthiamkok
I am making a html5 drag and drop uploader with jquery, below is my code so far, the problem is that I get an empty array without any data. Is this line incorrect to store the file data - fd.append('file', $thisfile);?
$('#div').on(
'dragover',
function(e) {
e.preventDefault();
e.stopPropagation();
}
);
$('#div').on(
'dragenter',
function(e) {
e.preventDefault();
e.stopPropagation();
}
);
$('#div').on(
'drop',
function(e){
if(e.originalEvent.dataTransfer){
if(e.originalEvent.dataTransfer.files.length) {
e.preventDefault();
e.stopPropagation();
// The file list.
var fileList = e.originalEvent.dataTransfer.files;
//console.log(fileList);
// Loop the ajax post.
for (var i = 0; i < fileList.length; i++) {
var $thisfile = fileList[i];
console.log($thisfile);
// HTML5 form data object.
var fd = new FormData();
//console.log(fd);
fd.append('file', $thisfile);
/*
var file = {name: fileList[i].name, type: fileList[i].type, size:fileList[i].size};
$.each(file, function(key, value) {
fd.append('file['+key+']', value);
})
*/
$.ajax({
url: "upload.php",
type: "POST",
data: fd,
processData: false,
contentType: false,
success: function(response) {
// .. do something
},
error: function(jqXHR, textStatus, errorMessage) {
console.log(errorMessage); // Optional
}
});
}
/*UPLOAD FILES HERE*/
upload(e.originalEvent.dataTransfer.files);
}
}
}
);
function upload(files){
console.log('Upload '+files.length+' File(s).');
};
then if I use another method is that to make the file data into an array inside the jquery code,
var file = {name: fileList[i].name, type: fileList[i].type, size:fileList[i].size};
$.each(file, function(key, value) {
fd.append('file['+key+']', value);
});
but where is the tmp_name data inside e.originalEvent.dataTransfer.files[i]?
php,
print_r($_POST);
$uploaddir = './uploads/';
$file = $uploaddir . basename($_POST['file']['name']);
if (move_uploaded_file($_POST['file']['tmp_name'], $file)) {
echo "success";
} else {
echo "error";
}
as you can see that tmp_name is needed to upload the file via php...
html,
<div id="div">Drop here</div>
