HTML5：JSで生成されたファイルをドラッグする

Question

セキュリティ上の懸念があるかもしれませんが、JavaScriptを使用してファイルを生成し、デスクトップ（またはファイルシステム）にドラッグできるようにすることができますか？

次のコードは、サーバー

files[0].addEventListener("dragstart",function(evt){ 
    evt.dataTransfer.setData("DownloadURL", "application/octet-stream:Eadui2.ttf:http://thecssninja.come/demo/gmail_dragout/Eadui.ttf"); 
},false); 

そして、私はファイルを生成し、それをダウンロードする必要がありますが、私は、ファイル名を設定したり、ユーザーが選択させることができないことができ、以下のコードを使用してからファイルをドラッグロケーション。

var uriContent = "data:application/octet-stream," + encodeURIComponent(JSON.stringify(map)); 
location.href = uriContent; 

理想的には、両方の魔法の組み合わせが欲しいです。

Answer 1

これはChromeの場合のみ可能であり、さらにChromeで場所を設定することはできませんする必要があります。使用するにはChromeのみが大丈夫であれば、あなたは次のオプションがあります：CSS忍者のチュートリアルからのようなドラッグnの

1. スティック」を削除し、その後はベンの答えを試してみてください。 encodeURIComponentは片道ですが、BlobBuilderを使用してファイルを生成した場合は、window.webkitURL.createObjectURL()を使用してファイルのURLを取得できます。 FileWriter()をrequestFileSystem(TEMPORARY, ...)と一緒に使用することもできます。

2. Chromeがサポートdownloadアンカータグの属性を使用すると、クリックしてユーザーのための定期的なリンク（ドラッグでも動作します）持つことができるように：クロスブラウザのサポートのために

   <a href="#your_url" download="filename.ext">Download</a>

3. を私はDownloadifyを示唆しています。

Answer 2

サーバーにファイルを送信し、そのファイルを保存し、戻り値を確認してダウンロードファイル機能を起動し、その後サーバーからファイルを削除するサーバーファイルを試すことができます。

（jQueryを使って）このような何か

$.ajax({ 
    url: 'saveFile.php', 
    method: 'post', 
    data: { 
    Filedata: data// file data variable 
    }, 
    success: function(d) { 
    // save file function, where d is the filename 
    } 
}) 

PHP： $ファイル名=; //ファイル名を生成 ますfile_put_contents（$ファイル名、$ _POST [ 'FILEDATA']）; echo $ filename;

は明らかにそれまで以上ありますが、それは基本的

Answer 3

次のコードは、現在唯一のChromeで働いている：

// generate downloadable URL, file name here will not affect stored file 
var url = URL.createObjectURL(new File([JSON.stringify(map)], 'file_name.txt')); 
// note that any draggable element may be used instead of files[0] 
// since JSON.stringify returns a string, we use 'text' type in setData 
files[0].addEventListener("dragstart", function(evt) { 
    evt.dataTransfer.setData("DownloadURL", "text:file_name.txt:" + url); 
}, false); 

を今、デスクトップまたはファイルシステムへのブラウザから私たちのファイル[0]要素をドラッグし、そこと呼ばれるテキストファイルを保存する、file_nameに。TXT。

は、別のファイル名を選択すること自由に感じ:)あなたは、サーバーから削除し、それをダウンロードし、最初のサーバーに保存しようとしないのはなぜ