jQuery $ .post () Невозможно загрузить файл вместе с данными формы

Question

Я пытаюсь загрузить файл вместе с другими элементами формы. Образец кода приведен на jsfiddle

У меня было несколько ошибок, пытаясь разными способами.

Когда я использую $form = new FormData($(this)), я получаю следующую ошибку: TypeError: Argument 1 of FormData.constructor does not implement interface HTMLFormElement.

Когда я просто использую $form = $(this), форма работает, но файл не загружается.

HTML-код:

<div class="form_result"></div>
<form action="" method="post" id="main_form_new" name="main_form_new" enctype="multipart/form-data">
    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <label for="uname">Username</label>
                <select tabindex="52" class="form-control" name="uname" id="uname">
                    <option value="1">user 1</option>
                </select>
            </div>
            <div class="form-group">
                <label for="pay">Payment Method</label>
                <select tabindex="55" class="form-control" name="pay" id="pay">
                    <option value="1">Online Transfer</option>
                    <option value="2">Wire Transfer</option>
                    <option value="3">IMPS</option>
                </select>
            </div>
            <div class="form-group">
                <label class="control-label" for="uproof">Upload Proof</label>
                <input tabindex="56" class="browsefile" id="uproof" name="uproof" size="20" type="file" />
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label for="bankn"> Bank Name</label>
                <input type="text" tabindex="57" maxlength="120" id="bankn" name="bankn" class="form-control" required />
            </div>
            <div class="form-group">
                <label for="transid">Trans ID</label>
                <input type="text" tabindex="61" maxlength="100" id="transid" name="transid" class="form-control" required />
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button tabindex="64" type="submit" id="btn-progress" class="btn btn-primary sbbtn"><i class="fa fa-save"></i> Save Changes</button>
    </div>
</form>

Код jQuery выглядит так:

$(function() {
    function formSubmitHandler(options) {
        return function (e) {
            var $form = new FormData($(this)),
                $submit = $(options.submit),
                $alert = $(options.alert);

            e.preventDefault();

            $alert.fadeOut();
            $submit.html('Saving Changes...').prop({disabled: true});

            $.post(options.url, $form.serialize())
            .done(function (data) {
                $alert.html(data).fadeIn();
                $form.trigger('reset');
            })
            .fail(function (jqXHR, textStatus, errorThrown) {
                $alert.html(textStatus).fadeIn();
                console.log(arguments);
            })
            .always(function () {
                $submit.html('Save Changes').prop({disabled: false});
            });
        };
    }

    $('#main_form_new').submit(formSubmitHandler({
        url: 'ajax/category.php',
        submit: '.sbbtn',
        alert: '.form_result'
    }));
});

Как я могу загрузить файл вместе с другими элементами формы? Пожалуйста помоги!

jquery

0

AanalMehta 22 Окт 2018 в 23:52

Answer 1

Аргументом для new FormData() должен быть элемент DOM для формы, но $(this) - это объект jQuery, содержащий этот элемент. Вам следует просто использовать this.

Вы не можете использовать $form.serialize(). serialize() - это метод jQuery, но $form - это объект FormData. Просто используйте $form в качестве аргумента данных.

Но вы не можете опубликовать FormData, используя простой формат $.post, вам нужно использовать либо $.ajax, либо форму $.post, которая принимает объект настроек в качестве аргумента (доступно после 1.12 или 2.2) `

$(function() {
  function formSubmitHandler(options) {
    return function(e) {
      var $form = new FormData(this),
        $submit = $(options.submit),
        $alert = $(options.alert);

      e.preventDefault();

      $alert.fadeOut();
      $submit.html('Saving Changes...').prop({
        disabled: true
      });

      $.ajax({
          url: options.url,
          type: "POST",
          data: $form,
          processData: false
        })
        .done(function(data) {
          $alert.html(data).fadeIn();
          $form.trigger('reset');
        })
        .fail(function(jqXHR, textStatus, errorThrown) {
          $alert.html(textStatus).fadeIn();
          console.log(arguments);
        })
        .always(function() {
          $submit.html('Save Changes').prop({
            disabled: false
          });
        });
    };
  }

  $('#main_form_new').submit(formSubmitHandler({
    url: 'ajax/category.php',
    submit: '.sbbtn',
    alert: '.form_result'
  }));
});

0

Barmar 22 Окт 2018 в 21:09

Answer 2

Для этого вам необходимо создать новую FormData и добавить к каждому из них другие элементы, а также файл.

// Create the form that we will be sending
var formData = new FormData();
formData.append("productMedia", fileToUpload);
formData.append("uname", userName);
formData.append("pay", pay); 
// Other elements you need to append.  

$.ajax({
    url: 'ajax/category.php',
    data: formData,
    // Tell jQuery not to process data or not to worry about content-type
    // You *must* include these options in order to send MultipartFile objects
    contentType: false,
    processData: false,
    method: 'POST',
    type: 'POST'
}

Этот код отправит файл с любым другим добавленным вами элементом. Так я всегда поступал со Spring, но он не должен отличаться, поскольку это тот же тип запроса.

0

Alain Cruz 22 Окт 2018 в 21:18

jQuery $ .post () Невозможно загрузить файл вместе с данными формы

2 ответа

Похожие вопросы

Новые вопросы

jquery