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

アップロードされたフォーム フィールドは、次のような名前を受け取ります。

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

4

8 に答える 8

163

Chrome、Safari、および Firefox の場合は、次のようにします。

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

( MDN のドキュメントを参照)

于 2012-01-30T15:18:30.870 に答える
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_urlblob:{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

テストしていませんが、ブロブ データの 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

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

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

IE10にはでmsSaveBlob()機能がありBlobBuilderます。

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

于 2012-01-23T12:57:04.910 に答える
0

Google App Engine を使用していますか? Cookie (JavaScript で作成) を使用して、ファイル名とサーバーから受け取った名前との関係を維持できます。

于 2011-07-21T11:58:38.070 に答える
0

それは、反対側のサーバーがどのように構成されているか、およびブロブの投稿をどのように処理するかについてどのモジュールを使用しているかに大きく依存します。投稿のパスに目的の名前を入れてみてください。

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