Текстовое содержимое и загрузка файла с помощью AJAX

Question

Текстовое содержимое и загрузка файла с помощью AJAX

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

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

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

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

Позвольте мне привести пример ФОРМЫ:

<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

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

Спасибо

4

ajax asyncfileupload jquery php

Решение

Другие решения

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

https://github.com/malsup/form

0

Источник

Accepted Answer

Для загрузки 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
}
});
});

5