web-dev-qa-db-ja.com

FormDataとしてアップロードされたBlobにファイル名を付ける方法は？

現在、クリップボードから貼り付けられた画像を次のコードでアップロードしています。

// 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のような名前が付けられています。

サーバー側の通信を行わずに、これを設定したり、このファイル名のクライアント側を受信する方法はありますか？

javascriptdomgoogle-chromeform-data
57
jontro

ChromeおよびFirefoxの場合、これを使用します。

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

（ MDNドキュメント を参照）

122
Chiguireitor

ここにないようにここに追加します。

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);
25
Noitidart

データをクリップボードに貼り付けているので、ファイルの起源とそのプロパティ（名前を含む）を知る信頼できる方法はありません。

最善の方法は、独自のファイル命名スキームを考え出し、blobとともに送信することです。

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

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

テストしていませんが、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);
1
JochenJung

それは、反対側のサーバーがどのように構成されているかと、BLOBポストをどのように処理するかのモジュールに本当に依存しています。投稿のパスに目的の名前を入力してみてください。

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

Google App Engineを使用していますか？ JavaScriptで作成されたCookieを使用して、ファイル名とサーバーから受信した名前との関係を維持できます。

0
Bogdacutu

その名前は、オブジェクトURL GUIDから派生したように見えます。次の手順を実行して、名前の派生元のオブジェクトURLを取得します。

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

object_urlは、Googleでblob:{Origin}{GUID}としてフォーマットされますChromeおよびFirefoxでmoz-filedata:{GUID}。Originはプロトコル+ホスト+プロトコルの非標準ポートです。たとえば、blob:http://stackoverflow.com/e7bc644d-d174-4d5e-b85d-beeb89c17743またはblob:http://[::1]:123/15111656-e46c-411d-a697-a09d23ec9a99。GUIDを抽出し、ダッシュを削除することをお勧めします。

0
Eli Grey

Google Chromeを使用している場合は、_Google Filesystem API_を使用/乱用できます。ここで、指定した名前のファイルを作成し、それにblobのコンテンツを書き込むことができます。結果をユーザーに返すことができます。

Firefoxの良い方法をまだ見つけていません。ブロブに名前を付けるには、おそらくdownloadifyのような小さなFlashが必要です。

IE10には、BlobBuilderにmsSaveBlob()関数があります。

たぶん、これはblobをダウンロードするためのものですが、関連しています。

0
Gijs Molenaar