XMLHttpRequest 上传带参数的文件答案

【问题标题】：XMLHttpRequest to upload a file with parametersXMLHttpRequest 上传带参数的文件
【发布时间】：2015-03-27 06:56:10
【问题描述】：

我想使用 Safari 5.1 的 XMLHTTRequest 上传文件并在 POST 请求中传递参数。如何实现？它应该是纯 javascript 而不使用任何 API，我这样做是因为 Safari 不支持 FileReader 5.1版本。

var fd = new FormData();
fd.append('file', $files[i]);
var xhr = new XMLHttpRequest();
xhr.addEventListener("load", function(){alert("Done!");}, false);
xhr.open("POST", url.getUrl('myurl'));
xhr.send(fd);

上面这段代码正确吗？如何将参数传递给POST请求。

【问题讨论】：

你能补充一点关于你遇到的问题的描述吗？
你想从哪里得到你的文件？
简单例子developer.mozilla.org/en-US/docs/Web/Guide/…

标签： javascript

【解决方案1】：

试试if( window.FormData === undefined ) or if( window.FormData !== undefined )。

更多参考click here

你也应该试试这个！

<script>
   var client = new XMLHttpRequest();

   function upload() 
   {
      var file = document.getElementById("uploadfile");

      /* Create a FormData instance */
      var fd = new FormData();
      /* Add the file */ 
      fd.append("upload", file.files[0]);

      client.open("post",url.getUrl('myurl'), true);
      client.setRequestHeader("Content-Type", "multipart/form-data");
      client.send(formData);  /* Send to server */ 
   }

   /* Check the response status */  
   client.onreadystatechange = function() 
   {
      if (client.readyState == 4 && client.status == 200) 
      {
         alert(client.statusText);
      }
   }
</script>

作为 FormData，send() 的能力和上传属性（及其 onprogress 事件）都是 XMLHttpRequest 级别 2 的一部分，您可以测试 .upload 以查看您是否有级别 2。我手边没有 Mac，但该函数（遗憾的是，但正确）对于 Opera 11.50 返回 false（对于 Firefox 4 返回 true）。

【讨论】：

【解决方案2】：

代码看起来不错。如果您想将其他参数传递给 POST，则必须将它们添加到 FormData。

var fd = new FormData();
// here the POST parameters
fd.append('parameter1', 'XXXX' );
fd.append('parameter2', 'YYYY' );
// The rest of your code
fd.append('file', $files[i]);
...

编辑：但我不确定 Safari 5.1 是否支持此功能

【讨论】：