отправка формы с данными и фото

244
05 апреля 2017, 15:48

какая работа с формой которая отправляет данные и фото стоит на клиенте? Валидацию полей и отпраку данных я умею делаю но вот как собрать данные с поля - загрузки файлы у меня проблема, что на js нужно написать для этого:

html:
<form id="formModel">
  <input type="text" name="name">
  <input type="text" name="phone">
  <input type="file" id="fileOne">
  <input type="submit">
</form>
js:
$("#formModel").submit(function() {
    $.ajax({
        url: "send.php",
        method: "POST",
        data: {
            name: $("#formModel input[name='name']").val(),
            phone: $("#formModel input[name='phone']").val(),
            file: $("#formModel #fileOne").val()
        },
        success: function(data) {
            $("#formModel input[name='name']").val(''),
            $("#formModel input[name='phone']").val(''),
            $("#btnSubmit").attr("value", "Отправлено")
        }
    });
    return false;
});
Answer 1

Можно сериализовать данные формы вместо того, чтобы собирать их по каждому полю, заодно это упростит загрузку файлов. Например, использовать объект FormData, позволяющий упаковать данные в виде пар "ключ - значение" для отправки с помощью XMLHttpRequest асинхронно. Тогда код будет выглядеть так:

<form id="formModel">
  <input type="text" name="name">
  <input type="text" name="phone">
  <input type="file" name="fileOne" id="fileOne">
  <input type="submit">
</form>
js:
$("#formModel").submit(function() {
    $.ajax({
        url: "send.php",
        method: "POST",
        data: new FormData( this ),
        success: function(data) {
            $("#formModel input[name='name']").val(''),
            $("#formModel input[name='phone']").val(''),
            $("#btnSubmit").attr("value", "Отправлено")
        }
    });
    return false;
});
Answer 2

Вот код со старого моего проекта, надеюсь поможет

 var data = new FormData();
if (this.files[0]) {
    var image_file = this.files[0];
}
data.append('upload', image_file);
jQuery.ajax({
    url: '/?ajax=upload_avatar',
    data: data,
    cache: false,
    contentType: false,
    processData: false,
    type: 'POST',
    success: function(data) {
        console.log("ajax success");
        console.log(data);
        jQuery("#avatar_image").attr("src", data);
    }
});
READ ALSO
Как вычислить интеграл на javascript?

Как вычислить интеграл на javascript?

Необходимо вычислить выражение :

551
Удаление класса внутри родителя

Удаление класса внутри родителя

Использую простенький скрипт для переключения активных элементовНо, столкнулся с проблемой

232
if else jQuery не работает

if else jQuery не работает

Добрый день, не пойму почему не срабатывает скриптПомогите пожалуйста

305