Asynchronous JQUERY Загрузка файла

Question

У меня есть HTML-форма с типом ввода файла. Мне нужно отправить форму асинхронно на сервер. Сервер прослушивает запрос на загрузку входящего файла (многофакторный файл). Можно ли добиться этого с помощью jquery.

Answer 1

Можно ли достичь этого с помощью jquery.

Нет, не напрямую с jQuery.

Вы можете использовать HTML5 API файла: https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

Или, если вам нужно поддерживать устаревшие версии браузеров вы могли бы использовать некоторые плагин, такие как Uploadify, Fine Uploader или jQuery form plugin.

Answer 2

Я хотел бы взглянуть на этот плагин JQuery:

http://malsup.com/jquery/form/#file-upload

Answer 3

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

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

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

Для быстрого, чистого, например JavaScript в разделе "Sending files using a FormData object".

Если вы хотите добавить запасной вариант для старых браузеров, или если вы хотите только один кросс-браузер реализации использовать Bifröst. Он добавляет дополнительные jQuery Ajax transport, позволяющие отправлять файлы с самолетом старого $.ajax().

Просто добавьте jquery.bifrost.js и сделать запрос:

$.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!"); 
}); 

Удачи!