Текстовое содержимое и FileUpload с AJAX

Я пишу систему клиентских баз данных для своей компании. Не очень причудливый материал, но он делает то, что должен. Теперь, когда все базовые «текстовые» вещи сделаны, я хочу добавить в него некоторое управление файлами.

У меня есть несколько форм, которые отправляются на бэкэнд с помощью ajax и затем записываются в db в модели.

В некоторых из этих форм планируется загрузить файл документа.

Есть ли способ обработки нормальных значений и отправка файла с помощью AJAX?

Позвольте мне привести пример FORM:

<form action="SOMEPATH/LOGIC_FILE.php" action="POST" enctype= multipart/form-data> <label for="name"> <input type="text" id="name" name="name" /> </label> <label for="somethingElse"> <input type="text" id="somethingElse" name="somethingElse" /> </label> <label for="fileUpload"> <input type="file" /> </label> </form> 

Пример AJAX:

 var name = $('#name').val(); var somethingElse = $('#somethingElse').val(); var dataArr = { 'name':name, 'somethingElse':somethingElse}; MYELEMENT.click(function(e){ e.preventEventDefault(); $.ajax({ url: "PATH/logic/logic_update_client_allg.php", type: "POST", data: allgArray, success: function(dataArr){ // works }, error: function(){ // doesnt work } }); } 

То, как я обрабатываю свой вход INPUT VALUE

Как я могу продолжить загрузку файла с помощью этой формы?

спасибо

Для загрузки ajax вам нужно использовать xmlHttpRequest который уже доступен в jQuery.ajax() , но с использованием FormData .

Если вы не нацелены на устаревшие версии IE, например 7,8, вы можете использовать FormData . Следует заметить, что вам нужно установить для contentType, processData значение false .

См. Пример ниже:

 var name = $('#name').val(); var somethingElse = $('#somethingElse').val(); var fd = new FormData(); var dataArr = { name: name, somethingElse: somethingElse, file : fd.append('file', $('#fileUpload').get(0).files[0]) // put the file here }; MYELEMENT.click(function(e) { e.preventDefault(); $.ajax({ url: "PATH/logic/logic_update_client_allg.php", type: "POST", data: dataArr, //<----post here the files and other values processData: false, // tell jQuery not to process the data contentType: false // tell jQuery not to set contentType success: function(dataArr) { // works }, error: function() { // doesnt work } }); }); 

Используйте плагин jquery malsup для отправки файлов с использованием AJAX

https://github.com/malsup/form