Javascript 如何为作为 FormData 上传的 Blob 提供文件名？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6664967/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to give a Blob uploaded as FormData a file name?
提问by jontro
I am currently uploading images pasted from the clipboard with the following code:
我目前正在使用以下代码上传从剪贴板粘贴的图像：
// 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);
Turns out the uploaded form field with receive a name similar to this: Blob157fce71535b4f93ba92ac6053d81e3a
原来上传的表单字段与接收的名称类似：Blob157fce71535b4f93ba92ac6053d81e3a
Is there any way to set this or receive this file name client side, without doing any server side communication?
有没有办法在客户端设置或接收此文件名，而无需进行任何服务器端通信？
回答by Chiguireitor
For Chrome and Firefox, just use this:
对于 Chrome 和 Firefox，只需使用以下命令：
form.append("blob", blob, filename);
(see MDN documentation)
（参见MDN 文档）
回答by Noitidart
Adding this here as it doesn't seem to be here.
在这里添加它，因为它似乎不在这里。
Aside from the excellent solution of form.append("blob",blob, filename);you can also turn the blob into a Fileinstance:
除了优秀的解决方案，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);
回答by Mrchief
Since you're getting the data pasted to clipboard, there is no reliable way of knowing the origin of the file and its properties (including name).
由于您将数据粘贴到剪贴板，因此没有可靠的方法来了解文件的来源及其属性（包括名称）。
Your best bet is to come up with a file naming scheme of your own and send along with the blob.
最好的办法是想出一个你自己的文件命名方案，并与 blob 一起发送。
form.append("filename",getFileName());
form.append("blob",blob);
function getFileName() {
// logic to generate file names
}
回答by Eli Grey
That name looks derived from an object URL GUID. Do the following to get the object URL that the name was derived from.
该名称看起来源自对象 URL GUID。执行以下操作以获取派生名称的对象 URL。
var URL = self.URL || self.webkitURL || self;
var object_url = URL.createObjectURL(blob);
URL.revokeObjectURL(object_url);
object_urlwill be formatted as blob:{origin}{GUID}in Google Chrome and moz-filedata:{GUID}in Firefox. An origin is the protocol+host+non-standard port for the protocol. For example, blob:http://stackoverflow.com/e7bc644d-d174-4d5e-b85d-beeb89c17743or blob:http://[::1]:123/15111656-e46c-411d-a697-a09d23ec9a99. You probably want to extract the GUID and strip any dashes.
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 并去除任何破折号。
回答by JochenJung
Haven't tested it, but that should alert the blobs data url:
尚未对其进行测试，但这应该会提醒 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);
回答by mbarnes
It really depends on how the server on the other side is configured and with what modules for how it handles a blob post. You can try putting the desired name in the path for your post.
这实际上取决于另一端的服务器是如何配置的，以及它如何处理 blob 帖子的模块。您可以尝试将所需的名称放在帖子的路径中。
request.open(
"POST",
"/upload/myname.bmp",
true
);
回答by Bogdacutu
Are you using Google App Engine? You could use cookies (made with JavaScript) to maintain a relationship between filenames and the name received from the server.
您在使用 Google App Engine 吗？您可以使用 cookie（用 JavaScript 制作）来维护文件名和从服务器收到的名称之间的关系。
回答by Gijs Molenaar
When you are using Google Chrome you can use/abuse the Google Filesystem APIfor this. Here you can create a file with a specified name and write the content of a blob to it. Then you can return the result to the user.
当您使用 Google Chrome 时，您可以Google Filesystem API为此使用/滥用。您可以在此处创建具有指定名称的文件并将 blob 的内容写入其中。然后你可以将结果返回给用户。
I have not found a good way for Firefox yet; probably a small piece of Flash like downloadifyis required to name a blob.
我还没有找到适合 Firefox 的好方法；可能需要一小块 Flashdownloadify来命名 blob。
IE10 has a msSaveBlob()function in the BlobBuilder.
IE10msSaveBlob()在BlobBuilder.
Maybe this is more for downloading a blob, but it is related.
也许这更适合下载 blob，但它是相关的。
