1

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

私はMozillaからこの記事を読んでいますが、非同期でアップロードすることにそれほど興味はありません（ファイルとともに送信する必要のある他のデータがあるためですが、私が見つけたすべてのリソースはそれを実行していますXHR。

これが私が何とかつなぎ合わせたものです：

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データについて文句を言います。

理想的には、私の解決策は次のようになると思います。

  1. ユーザーがファイルをページにドラッグアンドドロップします
  2. ファイルが隠しファイルに追加されます<input>
  3. ファイルは、残りのフォームデータとともにPOSTされます。

ほとんどのブラウザでファイルをファイルにドラッグできることは承知しています<input>が、カスタムスタイルのより大きなドロップターゲットが必要です。

4

1 に答える 1

1

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

于 2012-03-08T19:51:50.800 に答える