如何通过拖放来发布文件（从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）

回答

相关问题