javascript - 如何在 IE 10 中发送 Post 请求？

Question

如何在 IE 10.0.9200 中使用 FormData() 发送 Post 请求？

HTML 代码:

<form id="myform" enctype="multipart/form-data" method="post">
    <input id="fileInput" type="file" name="avatar" style="width:100px; height:30px"/>  
    <div class="hr hr-12 dotted"></div>
    <button type="submit" class="btn btn-sm btn-primary">Submit</button>
    <button type="reset" class="btn btn-sm">Reset</button>
</form>

Javascript代码:发送表单数据以进行图像上传，并在提交图像到服务器后，请帮助我了解如何处理 formdata() 和 IE 10.0.9200 的 post 请求。

var fd = new FormData($form.get(0));

deferred = $.ajax({
            url: submit_url,
            type: $form.attr('method'),
            processData: false,
            contentType: false,
            dataType: 'json',
            data: fd,
            xhr: function() {
                var req = $.ajaxSettings.xhr();
                if (req && req.upload) {
                    req.upload.addEventListener('progress', function(e) {
                        if(e.lengthComputable) {    
                            var done = e.loaded || e.position, total = e.total || e.totalSize;
                            var percent = parseInt((done/total)*100) + '%';
                            //percentage of uploaded file
                        }
                    }, false);
                }
                return req;
            },
            beforeSend : function() {
            },
            success : function() {

            }
        })

Answer 1

复制自 https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects

使用 FormData 对象发送文件

您还可以使用 FormData 发送文件。只需在您的 :

中包含类型文件的元素即可

<form enctype="multipart/form-data" method="post" name="fileinfo">
  <label>Your email address:</label>
  <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br />
  <label>Custom file label:</label>
  <input type="text" name="filelabel" size="12" maxlength="32" /><br />
  <label>File to stash:</label>
  <input type="file" name="file" required />
  <input type="submit" value="Stash the file!" />
</form>
<div></div>

Then you can send it using code like the following:

var form = document.forms.namedItem("fileinfo");
form.addEventListener('submit', function(ev) {

  var oOutput = document.querySelector("div"),
      oData = new FormData(form);

  oData.append("CustomField", "This is some extra data");

  var oReq = new XMLHttpRequest();
  oReq.open("POST", "stash.php", true);
  oReq.onload = function(oEvent) {
    if (oReq.status == 200) {
      oOutput.innerHTML = "Uploaded!";
    } else {
      oOutput.innerHTML = "Error " + oReq.status + " occurred when trying to upload your file.<br \/>";
    }
  };

  oReq.send(oData);
  ev.preventDefault();
}, false);

您还可以将 File 或 Blob 直接附加到 FormData 对象，如下所示:

data.append("myfile", myBlob, "filename.txt");