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和Firefox，只需使用：

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

（见MDN documentation）

Answer 2

在此处添加此内容，因为它似乎并不在这里。

除了form.append("blob",blob, filename);的优秀解决方案之外，您还可以将blob转换为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

没有测试过，但是应该提醒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 5

该名称看起来来自对象URL GUID。执行以下操作以获取名称源自的对象URL。

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

object_url将在Google Chrome中格式化为blob:{origin}{GUID}，在Firefox中格式化为moz-filedata:{GUID}。原点是协议的协议+主机+非标准端口。例如，blob:http://stackoverflow.com/e7bc644d-d174-4d5e-b85d-beeb89c17743或blob:http://[::1]:123/15111656-e46c-411d-a697-a09d23ec9a99。您可能想要提取GUID并删除任何破折号。

Answer 6

这实际上取决于另一端的服务器是如何配置的，以及它如何处理blob帖子的模块。您可以尝试在帖子的路径中输入所需的名称。

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

Answer 7

您使用的是Google App Engine吗？您可以使用cookie（使用JavaScript制作）来维护文件名与从服务器接收的名称之间的关系。

Answer 8

当您使用谷歌浏览器时，您可以使用/滥用Google Filesystem API。在这里，您可以创建具有指定名称的文件，并将blob的内容写入其中。然后，您可以将结果返回给用户。

我还没有找到适合Firefox的好方法;可能需要downloadify这样的一小段Flash来命名一个blob。

IE10在msSaveBlob()中有BlobBuilder个功能。

也许这更适合下载blob，但它是相关的。

如何将Blob作为FormData上传文件名？

8 个答案: