88

我目前正在使用以下代码上传从剪贴板粘贴的图像：

// 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

有没有办法在客户端设置这个或接收这个文件名，而不做任何服务器端通信？

4

8 回答 8

163

对于 Chrome、Safari 和 Firefox，只需使用以下命令：

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

（见MDN 文档）

于 2012-01-30T15:18:30.870 回答
39

在这里添加它，因为它似乎不在这里。

除了出色的解决方案之外，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);
于 2016-01-28T17:20:25.593 回答
3

由于您将数据粘贴到剪贴板，因此没有可靠的方法来了解文件的来源及其属性（包括名称）。

最好的办法是提出自己的文件命名方案并与 blob 一起发送。

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

function getFileName() {
 // logic to generate file names
}
于 2011-07-21T02:34:34.163 回答
2

该名称看起来是从对象 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}Google Chrome 和moz-filedata:{GUID}Firefox 中的格式进行格式化。源是协议的协议+主机+非标准端口。例如，blob:http://stackoverflow.com/e7bc644d-d174-4d5e-b85d-beeb89c17743或blob:http://[::1]:123/15111656-e46c-411d-a697-a09d23ec9a99。您可能想要提取 GUID 并去除任何破折号。

于 2011-07-20T07:40:01.107 回答
1

尚未对其进行测试，但这应该会提醒 blob 数据 url：

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);
于 2011-07-15T14:22:43.953 回答
0

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

request.open(
    "POST",
    "/upload/myname.bmp",
    true
);
于 2011-07-20T08:19:58.923 回答
0

你在使用谷歌应用引擎吗？您可以使用 cookie（用 JavaScript 制作）来维护文件名和从服务器接收到的名称之间的关系。

于 2011-07-21T11:58:38.070 回答
0

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

我还没有找到 Firefox 的好方法；可能需要一小块 Flashdownloadify来命名 blob。

IE10msSaveBlob()在BlobBuilder.

也许这更多地用于下载 blob，但它是相关的。

于 2012-01-23T12:57:04.910 回答