javascript - Ajax 文件上传的奇怪问题(jQuery、ASP.Net MVC)

Question

在我的网站的几个页面(ASP.Net MVC、jQuery、KendoUI SPA)上，我有一个用于上传文件的模式窗口。

addAttachment: function (e) {
  $("form").on("submit", function (event) {
    event.preventDefault();
  });
  e.preventDefault();

  var formData = new FormData($("#formUpload")[0]);
  var url = 'api/Attachments/UploadAttachment';
  app.postFile(url, formData, function (statusCode) {
    if (statusCode === 201) {
      // File was created -- do stuff
     
    }
  });
},

<div id="addAttachmentWindow"
    data-role="window"
    data-height="300px"
    data-width="600px"
    data-modal="true"
    data-title="Add Attachment"
    data-visible="false">
    <div class="row">
        <form id="formUpload" class="form-horizontal">
            <input type="hidden" id="hdnRecordId" name="recordId" data-bind="value: object.id" />
            <div class="form-group">
                <label class="col-sm-4 control-label" for="txtDocumentTitle">Title</label>
                <div class="col-sm-6">
                    <input name="documentTitle" id="txtDocumentTitle" type="text" class="k-textbox" />
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-4 control-label" for="fuFileInput">Document</label>
                <div class="col-sm-6">
                    <input id="fuFileInput" name="files" type="file" />
                </div>
            </div>
            <div class="col-sm-6 col-sm-offset-6">
                <button data-role="button" data-icon="plus" data-bind="click: addAttachment">Add Attachment</button>
            </div>
        </form>
    </div>
</div>

带有postFile的代码

var postFile = function(uri, formData, callback) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            callback(xhr.status);
        }
    };
    xhr.open('POST', uri);
    xhr.setRequestHeader("RequestVerificationToken", antiForgeryToken);
    xhr.send(formData);
};

大多数页面，这工作正常，但在一些页面上，它将发出 POST，没有表单字段，并立即发出 GET

/?recordId=1&documentTitle=documentTitleInput&files=FileNameHere.pdf

进入家庭 Controller 的索引功能。如果我转到存在此问题的页面之一，执行 Shift-Reload，然后尝试上传，它将按预期工作，表单字段完好无损，并且调用回调。

问题

• 为什么在初始 POST 之后(甚至在 POST 返回响应之前)立即使用查询字符串中的表单字段发出 GET
• 为什么表单字段为空，除非我在某些页面上进行了移位重新加载，而相同的代码在其他页面上运行良好。

我尝试创建一个空的 FormData，并向其附加值，并播放我能找到的所有内容来阻止正常提交事件的发生 (e.preventDefault(), e.stopPropogation()，返回 false 等)；

Answer 1

好的，所以阅读一下这个主题及其原因，因为阻止默认值仅适用于元素，而不适用于表单提交事件，这就是您使用的...

创建两个提交输入...一个是按钮，另一个是隐藏输入..就像这样..

<button type="button" id="submit">Submit</button>
<input style="display: none;" type="submit" id="realsubmit">

然后像这样做你的jquery ...

$("#submit").on('click', function() {

  //do stuff
  $("#realsubmit").trigger('click');
});