Я пишу систему клиентских баз данных для своей компании. Не очень причудливый материал, но он делает то, что должен. Теперь, когда все базовые «текстовые» вещи сделаны, я хочу добавить в него некоторое управление файлами.
У меня есть несколько форм, которые отправляются на бэкэнд с помощью 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