我正在使用新的 FormData 界面在 Javascript 中发布一个文件。当我使用 Safari 5.1.5 使用“multipart/form-data”发送文件时,Safari 会将文件强制转换为字符串,而不是发送实际的文件内容,而是发送[object Object]
.
Example:
var formdata = new FormData();
formdata.append("file", file);
var xhr = new XMLHttpRequest();
xhr.open("POST", "https://example.com/upload", true);
xhr.send(formdata);
Safari 最终发送的内容:
Origin: https://example.com/
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/534.55.3 (KHTML, like Gecko) Version/5.1.5 Safari/534.55.3
Content-Type: multipart/form-data; boundary=----WebKitFormBoundarycLc5AIMWzGxu58n8
Referer: https://example.com/upload
------WebKitFormBoundarycLc5AIMWzGxu58n8
Content-Disposition: form-data; name="file"
[object Object]
我的文件因此被上传,但文件的内容是,你猜对了,[object Object]
.
这里到底发生了什么?这是 Safari 的错误吗?
Edit 1
对于那些好奇如何动态生成 JS Blob 的人,这里有一个示例:
var Builder = (window.MozBlobBuilder || window.WebKitBlobBuilder || window.BlobBuilder);
var builder = new Builder();
builder.append("hello, world");
var file = builder.getBlob("text/plain")
不幸的是,这确实not在 Safari 上工作,所以将其包含在问题中并没有真正的帮助。
Edit 2
我引用的文件对象来自 DOM 元素上的放置操作。以下是如何检索文件的示例。 DOM 加载后运行以下命令。
function cancel(e) {
if (e.stopPropagation) {
e.stopPropagation();
}
if (e.preventDefault) {
e.preventDefault();
}
}
function drop(e) {
cancel(e);
for (var i=0; i<e.dataTransfer.files.length; i++) {
file = e.dataTransfer.files[i];
}
}
var elem = document.getElementById("upload-area");
elem.addEventListener("drop", drop, false);