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'
    }));
});

如何与其他表单元素一起上传文件？请帮忙！

Answer 1

为此，您需要创建一个新的FormData并将每个其他元素附加到文件以及文件中。

@corresp

此代码将发送文件以及您附加的其他任何元素。这是我一直使用Spring的方式，但是应该没什么不同，因为它是相同类型的请求。

Answer 2

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'
  }));
});

jQuery $ .post（）无法上载文件以及表单数据

2 个答案: