blocks|key|841732|text|对于Chrome、Safari和Firefox，只需使用以下代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|841733|form.append("blob",+blob,+filename);|code-block|syntax|javascript|841734|(参见MDN+documentation)|offset|length|841735|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/FormData/append^0|0|0|3|H|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

For Chrome, Safari and Firefox, just use this:

<pre><code>form.append("blob", blob, filename);
</code></pre>

(see <a href="https://developer.mozilla.org/en-US/docs/Web/API/FormData/append" rel="noreferrer">MDN documentation</a>)

blocks|key|841775|text|在这里添加这个，因为它似乎不在这里。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|841776|除了优秀的form.append("blob",blob,+filename);解决方案之外，您还可以将blob转换为File实例：|offset|length|style|CODE|841777|var+blob+=+new+Blob([JSON.stringify([0,1,2])],+{type+:+'application/json'});
var+fileOfBlob+=+new+File([blob],+'aFileName.json');
form.append("upload",+fileOfBlob);|code-block|syntax|javascript|841778|entityMap^0|0|5|Z|1N|4|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@$D|Q|E|R|F|G]|$D|S|E|T|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|U|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|N|$]]

Adding this here as it doesn't seem to be here.

Aside from the excellent solution of <code>form.append("blob",blob, filename);</code> you can also turn the blob into a <code>File</code> instance:

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

blocks|key|841485|text|由于您要将数据粘贴到剪贴板，因此没有可靠的方法来了解文件的来源及其属性(包括名称)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|841486|最好的办法是想出一个自己的文件命名方案，并随blob一起发送。|841487|form.append("filename",getFileName());
form.append("blob",blob);

function+getFileName()+{
+//+logic+to+generate+file+names
}|code-block|syntax|javascript|841488|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

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.

<pre><code>form.append("filename",getFileName());
form.append("blob",blob);

function getFileName() {
 // logic to generate file names
}
</code></pre>

blocks|key|625523|text|该名称看起来是从对象URL+GUID派生的。执行以下操作以获取从中派生该名称的对象URL。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|625524|var+URL+=+self.URL+%7C%7C+self.webkitURL+%7C%7C+self;
var+object_url+=+URL.createObjectURL(blob);
URL.revokeObjectURL(object_url);|code-block|syntax|javascript|625525|在谷歌浏览器中，object_url将被格式化为blob:{origin}{GUID}，在火狐中将被格式化为moz-filedata:{GUID}。源是协议%2B主机%2B协议的非标准端口。例如，blob:http://stackoverflow.com/e7bc644d-d174-4d5e-b85d-beeb89c17743或blob:http://[::1]:123/15111656-e46c-411d-a697-a09d23ec9a99。您可能希望提取GUID并去掉所有破折号。|offset|length|style|CODE|625526|entityMap^0|0|0|8|A|O|J|1I|J|2M|1U|4H|1M|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]|$I|T|J|U|K|L]|$I|V|J|W|K|L]|$I|X|J|Y|K|L]|$I|Z|J|10|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$]]

That name looks derived from an object URL GUID. Do the following to get the object URL that the name was derived from.

<pre><code>var URL = self.URL || self.webkitURL || self;
var object_url = URL.createObjectURL(blob);
URL.revokeObjectURL(object_url);
</code></pre>

<code>object_url</code> will be formatted as <code>blob:{origin}{GUID}</code> in Google Chrome and <code>moz-filedata:{GUID}</code> in Firefox. An origin is the protocol+host+non-standard port for the protocol. For example, <code>blob:http://stackoverflow.com/e7bc644d-d174-4d5e-b85d-beeb89c17743</code> or <code>blob:http://[::1]:123/15111656-e46c-411d-a697-a09d23ec9a99</code>. You probably want to extract the GUID and strip any dashes.

blocks|key|841106|text|还没有测试过，但这应该会提醒blobs数据url：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|841107|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);|code-block|syntax|javascript|841108|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Haven't tested it, but that should alert the blobs data url:

<pre><code>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); // &lt;-- data url
};
reader.readAsDataURL(blob);
</code></pre>

blocks|key|841410|text|这真的取决于另一端的服务器是如何配置的，以及它如何处理blob+post的模块。您可以尝试在您的帖子的路径中输入所需的名称。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|841411|request.open(
++++"POST",
++++"/upload/myname.bmp",
++++true
);|code-block|syntax|javascript|841412|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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. 

<pre><code>request.open(
 "POST",
 "/upload/myname.bmp",
 true
);
</code></pre>

blocks|key|625824|text|您是否在使用Google+App+Engine？您可以使用cookies+(用JavaScript制作)来维护文件名和从服务器接收的名称之间的关系。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|625825|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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.

blocks|key|625948|text|当你使用Google+Chrome时，你可以使用/滥用Google+Filesystem+API来做这件事。在这里，您可以创建一个具有指定名称的文件，并将blob的内容写入其中。然后，您可以将结果返回给用户。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|625949|我还没有找到火狐的好方法；可能需要像downloadify这样的一小块Flash来命名一个blob。|625950|IE10在BlobBuilder中有一个msSaveBlob()函数。|625951|也许这更多的是为了下载blob，但它是相关的。|625952|entityMap^0|R|L|0|I|B|0|5|B|K|C|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|T|8|@$9|U|A|V|B|C]|$9|W|A|X|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|Y|8|@]|D|@]|E|$]]|$1|L|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|M|$]]

When you are using Google Chrome you can use/abuse the <code>Google Filesystem API</code> for 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.

I have not found a good way for Firefox yet; probably a small piece of Flash like <code>downloadify</code> is required to name a blob.

IE10 has a <code>msSaveBlob()</code> function in the <code>BlobBuilder</code>. 

Maybe this is more for downloading a blob, but it is related.

I am currently uploading images pasted from the clipboard with the following code:

<pre><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);
</code></pre>

Turns out the uploaded form field with receive a name similar to this: Blob157fce71535b4f93ba92ac6053d81e3a

Is there any way to set this or receive this file name client side, without doing any server side communication?

How to give a Blob uploaded as FormData a file name?

服务器

JSON

我目前正在上传从剪贴板粘贴的图像，代码如下：// Turns out getAsFile will return a blob, not a filevar blob = event.clipboardData.items[0].getAsFile(),     form = new FormData(),    request = new XMLHttpRequest();form.append

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

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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