时间戳

首页 > 解决方案 > jQuery $.post() 无法与表单数据一起上传文件

jquery - jQuery $.post() 无法与表单数据一起上传文件

问题描述

我正在尝试将文件与其他表单元素一起上传。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

解决方案

为此，您需要创建一个新的 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 的方式，但它不应该有所不同，因为是相同类型的请求。

推荐阅读