Я сталкивался с этим вопросом, исследуя некоторые методы загрузки файлов AJAX.
Сегодня я создал скрипт загрузки методом перетаскивания (он все еще находится на стадии проверки концепции, но вот основные шаги, которые я предпринял.
$('drag-target-selector').on('drop', function(event) {
//stop the browser from opening the file
event.preventDefault();
//Now we need to get the files that were dropped
//The normal method would be to use event.dataTransfer.files
//but as jquery creates its own event object you ave to access
//the browser even through originalEvent. which looks like this
var files = event.originalEvent.dataTransfer.files;
//Use FormData to send the files
var formData = new FormData();
//append the files to the formData object
//if you are using multiple attribute you would loop through
//but for this example i will skip that
formData.append('files', files[0]);
}
теперь вы можете отправлять formData для обработки php-скриптом или чем-то еще, что вы хотите использовать. Я не использовал jquery в моем скрипте, так как было много проблем с ним, казалось бы, проще использовать регулярныеxhr. Вот этот код
var xhr = new XMLHttpRequest();
xhr.open('POST', 'upload.php');
xhr.onload = function() {
console.log(xhr.responseText);
};
xhr.upload.onprogress = function(event) {
if (event.lengthComputable) {
var complete = (event.loaded / event.total * 100 | 0);
//updates a <progress> tag to show upload progress
$('progress').val(complete);
}
};
xhr.send(formData);