Как я могу загружать файлы асинхронно?

2019 Обновление: Это еще зависит от браузеров ваш демографическое использование.

Важная вещь, чтобы понять с «новым» HTML5 file API это то что не поддерживается до IE 10. Если конкретный рынок, на который вы ориентируетесь, имеет склонность выше средних к старым версиям Windows, у вас может не быть к нему доступа.

По состоянию на 2017 год около 5% браузеров — это IE 6, 7, 8 или 9. Если вы идете в крупную корпорацию (например, это инструмент B2B или то, что вы предоставляете для обучения), это число может резко возрасти. В 2016 году я работал с компанией, использующей IE8, на более чем 60% своих машин.

Это 2019 на момент редактирования, почти через 11 лет после моего первоначального ответа. IE9 и ниже глобально около отметки 1%, но все еще есть кластеры более высокого использования.

Важный вывод из этого — какой бы ни была функция — это проверьте какой браузер ваш пользователи используют. Если вы этого не сделаете, вы извлечете быстрый и мучительный урок о том, почему «работает на меня» недостаточно хорошо в доставке клиенту. могу ли я использовать это полезный инструмент, но обратите внимание, откуда они берут свою демографию. Они могут не совпадать с вашими. Это никогда не является правдой, чем корпоративная среда.

Мой ответ от 2008 года следует.

Тем не менее, существуют жизнеспособные не-JS методы загрузки файлов. Вы можете создать на странице iframe (который вы скрываете с помощью CSS), а затем настроить таргетинг своей формы для публикации в этом iframe. Главная страница не должна двигаться.

Это «настоящий» пост, поэтому он не полностью интерактивный. Если вам нужен статус, вам нужно что-то на стороне сервера для обработки этого. Это сильно зависит от вашего сервера. ASP.NET имеет более приятные механизмы. PHP обычный не работает, но вы можете использовать Perl или модификации Apache, чтобы обойти это.

Если вам нужно несколько загрузок файлов, лучше делать каждый файл по одному (чтобы преодолеть максимальные ограничения на загрузку файлов). Отправьте первую форму в iframe, следите за ее продвижением, используя приведенное выше, и после ее завершения отправьте вторую форму в iframe и т. Д.

Или используйте решение Java / Flash. Они намного более гибки в том, что они могут делать со своими постами …

Я рекомендую использовать Fine Uploader Плагин для этой цели. Ваш JavaScript код будет:

$(document).ready(function() {
$("#uploadbutton").jsupload({
action: "addFile.do",
onComplete: function(response){
alert( "server response: " + response);
}
});
});

Примечание. Этот ответ устарел, теперь можно загружать файлы с использованием XHR.

Вы не можете загружать файлы, используя XMLHttpRequest (Ajax). Вы можете имитировать эффект, используя iframe или Flash. Отлично Плагин jQuery Form который отправляет ваши файлы через iframe, чтобы получить эффект.

это AJAX плагин для загрузки файлов jQuery загружает файл где-то, и передает
ответ на обратный звонок, больше ничего.

• Это не зависит от конкретного HTML, просто дайте ему <input type="file">
• Это не требует вашего сервера, чтобы ответить каким-либо конкретным способом
• Неважно, сколько файлов вы используете, или где они находятся на странице

— Используйте всего лишь —

$('#one-specific-file').ajaxfileupload({
'action': '/upload.php'
});

— или столько, сколько —

$('input[type="file"]').ajaxfileupload({
'action': '/upload.php',
'params': {
'extra': 'info'
},
'onComplete': function(response) {
console.log('custom handler for file:');
alert(JSON.stringify(response));
},
'onStart': function() {
if(weWantedTo) return false; // cancels upload
},
'onCancel': function() {
console.log('no file selected');
}
});

Подведение итогов для будущих читателей.

С HTML5

Вы можете загружать файлы с помощью jQuery с использованием $.ajax() метод, если FormData и Файловый API поддерживаются (обе функции HTML5).

Вы также можете отправлять файлы без FormData но в любом случае должен присутствовать File API для обработки файлов таким образом, чтобы их можно было отправить с XMLHttpRequest (Ajax).

$.ajax({
url: 'file/destination.html',
type: 'POST',
data: new FormData($('#formWithFiles')[0]), // The form with the file inputs.
processData: false,
contentType: false                    // Using FormData, no need to process data.
}).done(function(){
console.log("Success: Files sent!");
}).fail(function(){
console.log("An error occurred, the files couldn't be sent!");
});

Для быстрого, чистого JavaScript (нет jQuery) пример см.Отправка файлов с использованием объекта FormData».

Отступать

Когда HTML5 не поддерживается (нет Файловый API) единственное другое чистое решение JavaScript (нет вспышка или любой другой плагин для браузера) скрытый фрейм метод, который позволяет эмулировать асинхронный запрос без использования XMLHttpRequest объект.

Он состоит из установки iframe в качестве цели формы с входными данными файла. Когда пользователь отправляет запрос, создается и файлы загружаются, но ответ отображается внутри iframe вместо повторного рендеринга главной страницы. Скрытие iframe делает весь процесс прозрачным для пользователя и эмулирует асинхронный запрос.

Если все сделано правильно, он должен работать практически в любом браузере, но у него есть некоторые предостережения относительно того, как получить ответ от iframe.

В этом случае вы можете использовать плагин-оболочку, например Бифрост который использует техника iframe но также обеспечивает JQuery Ajax транспорт позволяя Отправить файлы только с $.ajax() метод как это:

$.ajax({
url: 'file/destination.html',
type: 'POST',
// Set the transport to use (iframe means to use Bifröst)
// and the expected data type (json in this case).
dataType: 'iframe json',
fileInputs: $('input[type="file"]'),  // The file inputs containing the files to send.
data: { msg: 'Some extra data you might need.'}
}).done(function(){
console.log("Success: Files sent!");
}).fail(function(){
console.log("An error occurred, the files couldn't be sent!");
});

Плагины

Бифрост это всего лишь небольшая оболочка, которая добавляет резервную поддержку метода ajax jQuery, но многие из вышеупомянутых плагинов, такие как Плагин jQuery Form или же Загрузка файла jQuery включает в себя весь стек от HTML5 до различных запасных вариантов и некоторые полезные функции для облегчения процесса. В зависимости от ваших потребностей и требований вы можете рассмотреть пустую реализацию или один из этих плагинов.

Я использовал приведенный ниже скрипт для загрузки изображений, который работает нормально.

<input id="file" type="file" name="file"/>
<div id="response"></div>

jQuery('document').ready(function(){
var input = document.getElementById("file");
var formdata = false;
if (window.FormData) {
formdata = new FormData();
}
input.addEventListener("change", function (evt) {
var i = 0, len = this.files.length, img, reader, file;

for ( ; i < len; i++ ) {
file = this.files[i];

if (!!file.type.match(/image.*/)) {
if ( window.FileReader ) {
reader = new FileReader();
reader.onloadend = function (e) {
//showUploadedItem(e.target.result, file.fileName);
};
reader.readAsDataURL(file);
}

if (formdata) {
formdata.append("image", file);
formdata.append("extra",'extra-data');
}

if (formdata) {
jQuery('div#response').html('<br /><img src="ajax-loader.gif"/>');

jQuery.ajax({
url: "upload.php",
type: "POST",
data: formdata,
processData: false,
contentType: false,
success: function (res) {
jQuery('div#response').html("Successfully uploaded");
}
});
}
}
else
{
alert('Not a vaild image!');
}
}

}, false);
});

Я использую ответ div показать анимацию загрузки и ответ после загрузки.

Самое приятное, что вы можете отправить дополнительные данные, такие как идентификаторы & и т.д. с файлом, когда вы используете этот скрипт. Я упомянул это extra-data как в сценарии.

На уровне PHP это будет работать как обычная загрузка файлов. дополнительные данные могут быть получены как $_POST данные.

Здесь вы не используете плагин и прочее. Вы можете изменить код, как вы хотите. Вы не слепо кодируете здесь. Это основная функциональность любой загрузки файла jQuery. На самом деле Javascript.

Вы можете загрузить просто с помощью jQuery .ajax(),

HTML:

<form id="upload-form">
<div>
<label for="file">File:</label>
<input type="file" id="file" name="file" />
<progress class="progress" value="0" max="100"></progress>
</div>
<hr />
<input type="submit" value="Submit" />
</form>

CSS

.progress { display: none; }

Javascript:

$(document).ready(function(ev) {
$("#upload-form").on('submit', (function(ev) {
ev.preventDefault();
$.ajax({
xhr: function() {
var progress = $('.progress'),
xhr = $.ajaxSettings.xhr();

progress.show();

xhr.upload.onprogress = function(ev) {
if (ev.lengthComputable) {
var percentComplete = parseInt((ev.loaded / ev.total) * 100);
progress.val(percentComplete);
if (percentComplete === 100) {
progress.hide().val(0);
}
}
};

return xhr;
},
url: 'upload.php',
type: 'POST',
data: new FormData(this),
contentType: false,
cache: false,
processData: false,
success: function(data, status, xhr) {
// ...
},
error: function(xhr, status, error) {
// ...
}
});
}));
});