如何给上传为FormData的Blob取一个文件名？

Question

我目前正在上传从剪贴板粘贴的图片，代码如下。

// Turns out getAsFile will return a blob, not a file
var blob = event.clipboardData.items[0].getAsFile(), 
    form = new FormData(),
    request = new XMLHttpRequest();
form.append("blob",blob);
request.open(
            "POST",
            "/upload",
            true
        );
request.send(form);

结果上传的表格字段收到一个类似于这样的名字： Blob157fce71535b4f93ba92ac6053d81e3a。

有什么办法可以在客户端设置或接收这个文件名，而不需要做任何服务器端的通信？

Answer 1

对于Chrome、Safari和Firefox，只需使用这个。

form.append("blob", blob, filename);

(参见 MDN文件)

Answer 2

在这里补充一下，因为这里好像没有。

除了出色的解决方案 form.append("blob",blob, filename); 你也可以把这个小球变成一个 File 的例子。

var blob = new Blob([JSON.stringify([0,1,2])], {type : 'application/json'});
var fileOfBlob = new File([blob], 'aFileName.json');
form.append("upload", fileOfBlob);

Answer 3

因为你要把数据粘贴到剪贴板上 没有可靠的方法知道文件的来源和属性（包括名称）。

你最好的办法是想出一个你自己的文件命名方案，并和blob一起发送。

form.append("filename",getFileName());
form.append("blob",blob);

function getFileName() {
 // logic to generate file names
}

Answer 4

这个名字看起来是从一个对象的URL GUID衍生出来的。执行下面的操作以获得该名称所衍生的对象URL。

var URL = self.URL || self.webkitURL || self;
var object_url = URL.createObjectURL(blob);
URL.revokeObjectURL(object_url);

object_url 将被格式化为 blob:{origin}{GUID} 在谷歌浏览器和 moz-filedata:{GUID} 在Firefox中。原点是协议+主机+协议的非标准端口。例如 blob:http://stackoverflow.com/e7bc644d-d174-4d5e-b85d-beeb89c17743 或 blob:http://[::1]:123/15111656-e46c-411d-a697-a09d23ec9a99. 你可能想提取GUID和剥离任何破折号。

Answer 5

还没有测试过，但这应该提醒blob数据的网址。

var blob = event.clipboardData.items[0].getAsFile(), 
    form = new FormData(),
    request = new XMLHttpRequest();

var reader = new FileReader();
reader.onload = function(event) {
  alert(event.target.result); // <-- data url
};
reader.readAsDataURL(blob);

Answer 6

这真的取决于另一边的服务器是如何配置的 以及它是如何处理blob帖子的模块。 你可以尝试在你的帖子的路径中加入所需的名称。

request.open(
    "POST",
    "/upload/myname.bmp",
    true
);

Answer 7

你是否在使用Google App Engine？你可以使用cookies（用JavaScript制作）来维护文件名和从服务器收到的名称之间的关系。

Answer 8

当你使用Google Chrome浏览器时，你可以使用以下功能 Google Filesystem API 为此，你可以创建一个指定名称的文件，并将blob的内容写入其中。在这里，你可以创建一个具有指定名称的文件，并将blob的内容写入其中。然后你可以把结果返回给用户。

我还没有为Firefox找到一个好的方法；可能是一个小的Flash片段，如 downloadify 是需要命名一个blob的。

IE10有一个 msSaveBlob() 中的功能 BlobBuilder.

也许这更多的是为了下载一个blob，但它是相关的。