ドラッグアンドドロップからファイルを（File APIから）POSTする方法

Question

ドラッグアンドドロップでファイルを選択するファイルアップロードページがあります。ファイルは（従来のフィールドを使用するのではなく）ドロップされているので、javascript File APIを介してファイルを公開しています。

私はthis article from Mozillaを読んできましたが、非同期でアップロードすることに興味があるわけではありません（他のデータもありますが、私が管理しているすべてのリソースを探しています。

function handleFileSelect(evt) { 
    evt.toElement.className = ""; 
    evt.stopPropagation(); 
    evt.preventDefault(); 

    var files = evt.dataTransfer.files; // FileList object. 

    // files is a FileList of File objects. List some properties. 
    var output = []; 
    for (var i = 0, file; file = files[i]; i++) { 
     var f = file; 

     var reader = new FileReader(); 
     reader.onload = function(e) { 
      var bin = e.target.result; 
      // bin is the binaryString 
     }; 
     reader.readAsBinaryString(file); 

     var xhr = new XMLHttpRequest(); 
     xhr.open("POST", "{% url micro-upload %}"); 
     xhr.overrideMimeType('text/plain; charset=x-user-defined-binary'); 
     xhr.sendAsBinary(bin); 

     output.push('<li><strong>Uploaded:</strong><em>', escape(f.name), '</em> (', f.type || 'n/a', ') - ', 
        f.size, ' bytes, last modified: ', 
        f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a', 
        '</li>'); 
    } 
    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>'; 
} 

ただし、サーバー側では、Djangoはこれを好きではないそれは不正な形式のPOSTデータ文句

理想的には、私の解決策を私は：。。XHRで

は、ここで私はつなぎ合わせることができたものです思うだろうb E本：

1. ユーザーのドラッグ・アンド・ドロップ
2. ファイルは隠しファイルに追加されているページにファイル<input>
3. ファイルは、フォームデータの残りの部分と一緒に掲載されています。

私は、ほとんどのブラウザでファイル<input>にファイルをドラッグできるようになっていますが、カスタムスタイリングでより大きなドロップターゲットを作成したいと考えています。

Answer 1

xhr.sendAsBinary()は標準ではありません。 FormDataの使用について考えましたか？そうすれば、ファイル（と他のプロパティ）をmime multipartリクエストに添付することができます。基本的には、form.post（）が行います。それを行う方法については、私の回答hereを参照してください。