如何通過拖放來發布文件（從File API）

我有一個文件上傳頁面，通過拖放選擇文件。由於該文件被放入（而不是使用傳統字段），因此我通過JavaScript File API向我公開了該文件。如何通過拖放來發布文件（從File API）

我一直在閱讀this article from 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數據

理想情況下，我的解決方案我。認爲會b E本：

用戶拖動和滴文件拖到頁面
文件添加到一個隱藏的文件<input>
文件與表格數據的其他部分一起發佈。

我知道大多數瀏覽器可以讓你把文件拖到一個文件<input>，但我希望有一個更大的自定義樣式放置目標。

來源

2012-03-05 Josh Hunt

xhr.sendAsBinary()不是標準配置。你有沒有想過使用FormData？這將允許您將文件（和其他屬性）附加到MIME多部分請求......實質上是form.post（）所做的事情。有關代碼，請參閱我的回覆here。

來源

2012-03-08 19:51:50 ebidel

如何通過拖放來發布文件（從File API）

回答

相關問題