Как загрузить файлы с помощью JQuery Ajax

Question

Можно создать дубликат:
File Upload via AJAX within JQuery
How to easily upload files without form submission (with jQuery + AJAX)

Я знаю, за то, что мы можем загружать файлы, используя формы с enctype="multipart/form-data", но то, что я пытаясь выяснить, загружает ли файлы с помощью JQuery Ajax ..

Любые советы? Заранее спасибо.

Answer 1

Попробуйте этот плагин JQuery http://valums.com/ajax-upload/

Затем используйте этот яваскрипт код

var uploader = new qq.FileUploader({ 
    // pass the element 
    element: $(selector)[0], 
    // path to server-side upload script 
    action: '/server/upload' 
}); 

Для получения дополнительной информации обратитесь к документации

Answer 2

я использовал http://blueimp.github.com/jQuery-File-Upload/ в прошлом, и он приходит с большим демо (s) и документации.

Проверьте это на https://github.com/blueimp/jQuery-File-Upload

Answer 3

зависит от ваших потребностей.

для одного файла, http://valums.com/ajax-upload/ хорошо прийти

для Multipla загрузки файлов + несколько файлов выбирают вам нужны другие технологии, такие как флэш-память или html5, вы можете проверить plupload или Uploadify

plupload поддерживает флэш, HTML5, Методы загрузки silvernight html4. а также поддержка мульти файлов выберите (для HTML4 кроме)

Uploadify поддерживает флэш и html5 для нескольких файлов выбирает

Answer 4

Упомянутые плагины все полезны, но если вы хотели бы знать логику процесса его что-то вроде этого :

1. Создайте файл php, который обрабатывает загрузку файлов и может возвращать ошибки (echo).
2. Создайте страницу HTML с формой и всеми
3. Созданием функции JQuery для:
   • Избегайте формы от их представлений
   • создать Ajax запрос к файлу PHP, созданному на первом этапе
   • показать результат из файла php в div.

Answer 5

Вы должны использовать объект FormData, но он будет работать только в современных браузерах.

if (window.FormData) { 
    $('input[type=file]').change(function() { 
     var formdata = new FormData(); 
     var file = this.files[0]; 
     formdata.append("files[]", file); 
     $.ajax({ 
      url: "upload.php", 
      type: "POST", 
      data: formdata, 
      processData: false, 
      contentType: false 
     }); 
    }); 
} 

Некоторые подробнее: https://developer.mozilla.org/en/XMLHttpRequest/FormData

Вы также можете увидеть LIB с примером HTML и некоторыми дополнительными функциями: http://net.tutsplus.com/tutorials/javascript-ajax/uploading-files-with-ajax/

Для поддержки старых браузеров, вы можете сделать IFRAME, клон входного файла элемента к iframe и представить форму там. Таким образом, страница не будет обновляться, и она будет похожа на AJAX.