Question

我有一个HTML5输入控件，允许最终用户上传.csv文件：

<input id="ImportFile" type="file" name="ImportFile" data-val="true" data-val-required="Please select a file" title="Browse for a file to upload" />

这是一个很好的表格，允许我将上传的数据提交给服务器：

verify: function () {

    //  Run form validate to style controls if they're invalid.
    var isValid = this.form.valid();

    if (isValid) {
        this.isVerifyInput.val(true);
        this.form.submit();
        this.isVerifyInput.val(false);
    }
}

在验证过程中，服务器需要能够通知用户在验证其上传文件时遇到的错误。

因此，我的表单以隐藏的iframe为目标，该iframe使用了提交的页面刷新操作：

<form action="/csweb/Component/ImportComponents" enctype="multipart/form-data" id="ImportComponentsForm" method="post" name="ImportComponentsForm" target="UploadTarget">
    <input data-val="true" data-val-required="The IsVerify field is required." id="IsVerify" name="IsVerify" type="hidden" value="false" class="valid">
    <input id="ImportFile" type="file" name="ImportFile" data-val="true" data-val-required="Please select a file" title="Browse for a file to upload" class="valid">
</form>

<iframe id="UploadTarget" name="UploadTarget" class="uploadTarget"></iframe>

然后我收到提交完成的通知：

this.$el.find('iframe.uploadTarget').load(this.onUploadComplete.bind(this));

这不起作用，因为当然，在表单提交后我无法读取服务器的“响应”。

然而，我有点困惑。有关此问题的StackOverflow文章建议对表单数据进行序列化：

Submit a form and get a JSON response with jQuery

据我所知 - 无法序列化上传的数据并将其POST到服务器。我的理解是上传的数据必须通过form.submit发送。这是对的吗？

如果是这样，我如何提供上传内容的服务器端验证？看来我唯一的选择是提交表单，临时记录服务器端的信息，等待iframe的加载事件，然后向服务器发出GET请求以检索任何潜在的消息。这是我唯一的选择吗？

Answer 1

我们可以使用ajax发布序列化表单数据但是对于文件上传案例将会失败。使用ajax检查下面的url文件上传

http://www.scriptiny.com/2013/02/simple-file-upload-using-ajax/ http://zurb.com/playground/ajax-upload

将文件上载到服务器后显示服务器响应

1 个答案: