Добавить в мой js код поле с файлом
Добрый день, есть скрипт который отправляет данные формы в php файл для дальнейшей обработки полей:
function addsite() { sname = $("#sname").val(); scat1 = $("#scat1").val(); scat2 = $("#scat2").val(); scat3 = $("#scat3").val(); sprice = $("#sprice").val(); soldprice = $("#soldprice").val(); scms = $("#scms").val(); swork = $("#swork").val(); surl = $("#surl").val(); sopis = $("#sopis").val(); form = 'addsite'; user = '<?php echo $id; ?>'; $.ajax({ type:"POST", url:"../php/lk.php", data: {"sname":sname, "scat1":scat1, "scat2":scat2, "scat3":scat3, "sprice":sprice, "soldprice":soldprice, "scms":scms, "swork":swork, "surl":surl, "sopis":sopis, "form":form, "form":form, "user":user}, cache: false, success: function(responce){ $('#addsite').html(responce); } }) } Это все работает. Но в форме есть еще одно поле с файлом: <input id="sscr" name="sscr" type="file" class="form-control"> Можно ли в мой js код передать еще и этот файл? (В php я обработаю, опыт есть), не знаю как в js это правильно дописать в data |
Строки 2-13 выбросить.
В опциях $.ajax добавить два параметра: contentType: false и processData: false. ID юзера не в код JS вставлять на стороне сервера, а в скрытое поле формы. Если это form = 'addsite' именование формы, то также получать ее как свойство формы. Параметр data формы можно передать как data: new FormData(f), где f, это форма. Но такой способ имеет один недостаток, даже при не выбранном файле на сервере будет получено это поле, и как следствие ошибка загрузки файла. Поэтому элементы формы лучше обойти циклом добавив их имя/значение в FormData используя его методы. |
Путем проб и ошибок получилось так, файл ходит, обрабатывается (с передачей id юзера да, пока не придумал как это сделать)
$(function() { $('#saddsite').on('submit', function(e){ e.preventDefault() var form = $(this); var data = new FormData(); // Сбор данных из обычных полей form.find(':input[name]').not('[type="file"]').each(function() { var field = $(this); data.append(field.attr('name'), field.val()); }); data.append('form', 'addsite'); data.append('user', '<?php echo $id; ?>'); // Сбор данных о файле var filesField = form.find('input[type="file"]'); var fileName = filesField.attr('name'); var file = filesField.prop('files')[0]; data.append(fileName, file) ; $.ajax({ url: '../php/lk.php', type: 'POST', data: data, contentType: false, cache: false, processData:false, success: function(response) { console.log(response) } }); }) }); |
$('#saddsite').on('submit', function(e){ e.preventDefault() var data = new FormData(); а далее просто собрать поля, которые нужно оправить (те поля формы, которые имеют имя, то есть не требующие отправки их не должны иметь, та же кнопка submit к примеру.) $.each(this.elements, function() { if(this.name) data.append(this.name, this.value) }); разбрасывать все отдельно на два цикла нет ни какого смысла, единственно, что нужно сделать, так это проверить тип поля, и если это файл, то добавлять только в том случае, если файл выбран, то есть его value не пусто. PS. То есть полно это так: $('#saddsite').on('submit', function(e){ e.preventDefault() var data = new FormData(); $.each(this.elements, function() { if(this.name) { if(this.type=='file' && this.value) data.append(this.name, this.files[0]); else data.append(this.name, this.value); } }); //если и это нужно form = 'addsite';, то data.append('form', this.id); $.ajax( //.... ) }); Касаемо id юзера, чего там придумывать - отдавая страницу клиенту, помещайте в форму поле <input type="hidden" name="user" value="<?=$id>">. |
Попытался повторить описанное в приведенном посте:
let imagevorkerimage=$(".fotoworker").prop('files')[0]; console.log(imagevorkerimage); Выдает File { name: "jsB2SVztOqU.jpg", lastModified: 1561738954801, webkitRelativePath: "", size: 192016, type: "image/jpeg" }. Что из этого необходимо для сохранения файла ? Пытался добавить в ajax переменные contentType: false и processData: let dannienowworker="Строка, собранная из данных с других полей. Её содержимое в обработчике записывается в специальную таблицу бд"; $.ajax({ type: 'POST', data:{dannienowworker:dannienowworker}, contentType: false, processData:false, url:"Файл обработчик", success: function (result) { } }); В созданной строке бд все столбцы пустые. Без вышеупомянутх свойст все работает нормально. Данные в файл-обработчик поступают в ином виде (сейчас содержащая их входное значание переменная - $_POST["dannienowworker"])? |
Цитата:
Цитата:
|
Часовой пояс GMT +3, время: 13:06. |