在Google Chrome / Chromium和Safari中拖放file upload？
拖放file upload可以在Firefox 3.6中完成。
Googlesearchhtml5拖放file upload-gmail提供了如下内容：
- 本机拖放file upload在Firefox 3.6中
- http://www.appelsiini.net/2009/10/html5-drag-and-drop-multiple-file-upload
- http://www.thecssninja.com/javascript/drag-and-drop-upload
所有这些指南都使用FileReader （或者不支持其他浏览器的Firefox 3.6的弃用getAsBinary ）。
不过，谷歌最近发布了Gmail的更新，允许在Chromium和Firefox上拖放file upload，Chromium 没有FileReader 。 我每晚使用最新的Chromium，它可以拖放上传文件，而不支持FileReader 。
我曾经见过有人提到，通过拖放到<input type="file" /> ，拖放上传可能是可能的，但一次只能支持一个文件，而Gmail的上传者可以处理多个文件被拖动到其上，所以这显然不是他们在做什么。
所以问题是，他们怎么做？ 如何支持Chromium for HTML5file upload？ 另外，你可以支持Safari吗？
警告： 这是适用于非常旧版本的Safari和Chrome的兼容性代码。 现代浏览器都支持FileReader API; 这里有一个教程： https ： //developer.mozilla.org/en-US/docs/Using_files_from_web_applications
此代码现在仅在某些原因需要支持Safari 5及更高版本或者Chrome 6及更高版本时才有用。
一种可能性是使用SwellJS中使用的方法 ：
使用<input type="file" multiple="multiple" />像这样：
<form method="post" enctype="multipart/form-data" id="uploadform"> <input type="file" name="dragupload[]" multiple="multiple" onchange="if (this.value) document.getElementById('uploadform').submit();" /> </form>
input元素可以被设置为具有opacity: 0并且被定位（绝对）在可接受上传的元素上。 整个表单可以放在一个iframe用于“伪Ajax”的行为。 上传元素可以是一个隐藏的层，直到拖动它为止。
这样的iframe将如下所示：
<script> <!-- var entered = 0; --> </script> <body ondragenter="entered++;document.getElementById('uploadelement').style.display='block'" ondragleave="entered--;if (!entered) document.getElementById('uploadelement').style.display='none'"> <form method="post" enctype="multipart/form-data" id="uploadform"> Things can be dragged and dropped here! <input type="file" id="uploadelement" name="dragupload[]" multiple="multiple" onchange="if (this.value) { document.getElementById('uploadform').submit(); }" style="display:none;position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;" /> </form> </body>
这应该只在检测到Safari或Chrome时才能完成（因为其他浏览器不支持拖放到<input type="file" />元素），并且可以与Firefox的HTML5 drop事件组合使用3.6及更高版本。
我不知道这是Gmail使用的方法，但它当然也适用。
您可能对更符合技术和浏览器的内容感兴趣。
在我看来， Plupload不错，支持以下function：
- 分块
- 拖放
- PNGresize
- JPEGresize
- types过滤
- stream上传
- 分段上传
- 文件大小限制
- 上传进度
对于大多数以下技术：
- 闪
- 齿轮
- HTML 5
- Silverlight的
- 的BrowserPlus
是的， 自2010年5月27日起 ，它支持在Chrome beta上运行的HTML5拖放function。
经过很多非常多的侦探工作，我在Chrome中有一些工作。 这只适用于Chrome。 在Safari上，它冻结。 在Firefox上，它不会让我丢弃文件。 IE打开掉落的文件。 即使在Chrome中，由于某种原因，拖放只能使用一次，之后必须刷新页面。 （可能的原因是事件处理程序有问题。）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript"> window.onload = function () { var div = document.getElementById('div'); div.ondragenter = div.ondragover = function (e) { e.preventDefault(); e.dataTransfer.dropEffect = 'copy'; return false; } div.ondrop = function (e) { for (var i = 0; i < e.dataTransfer.files.length; i++) { // e.dataTransfer is a DataTransfer object (https://developer.mozilla.org/En/DragDrop/DataTransfer), e.dataTransfer.files is a FileList object (https://developer.mozilla.org/en/DOM/FileList) var file = e.dataTransfer.files[i]; // file is a File object (https://developer.mozilla.org/en/DOM/File) var xhr = new XMLHttpRequest; xhr.open('post', 'handler.php', true); xhr.onreadystatechange = function () { if (this.readyState != 4) return; document.body.innerHTML += '<pre>' + this.responseText + '</pre>'; } xhr.setRequestHeader('Content-Type', 'multipart/form-data'); xhr.setRequestHeader('X-File-Name', file.fileName); xhr.setRequestHeader('X-File-Size', file.fileSize); xhr.send(file); // For some reason sending the actual File object in Chrome works? } e.preventDefault(); return false; } } </script> </head> <body> <div id="div" style="width: 100%; height: 200px; border: 1px solid blue">Drop here</div> </body> </html>
handler.php：
// This is not a true file upload. Instead, it sends the raw data directly. echo htmlentities(file_get_contents('php://input'));
您不需要使用iframe来执行伪阿贾克斯上传。 Chrome和Safari都支持XHR2上传进度事件，所以你可以做进度条等。
对于我们自己的应用程序，我们只对FireFox进行拖放。 我们恢复到其他人的传统的iframe上传。 为了检测是否支持拖放操作，我们运行以下代码：
if (typeof(window.File) == 'object' && typeof(window.FileReader) == 'function' && typeof(window.FileList) == 'object') { // DnD is supported! }
希望这对一些人有帮助。
您可以使用html5uploader库： http : //code.google.com/p/html5uploader/
它适用于Firefox，Safari和Chrome。
最新的浏览器支持file upload很好。 你可以使用：
xhr = new XMLHttpRequest(); xhr.open('POST', targetPHP, true); var formData = new FormData(); formData.append('upload',file); xhr.send(formData);
你不需要设置边界或任何头，就像这样，它工作正常。 我在客户端testing了这个代码：firefox 6.02和chrome 13. server：tomcat with“spring mvc”
你可以使用FormData存储文件，然后上传它。 例如
function setUp(){ var dropContainer = document.getElementById("container"); dropContainer.addEventListener("drop",dropHandler,false); dropContainer.addEventListener("dragenter", function(event){event.stopPropagation();event.preventDefault();}, false); dropContainer.addEventListener("dragover", function(event){event.stopPropagation();event.preventDefault();}, false); dropContainer.addEventListener("drop", dropHandler, false); getResult() } function dropHandler(event){ var files = event.dataTransfer.files; var count = files.length; form = new FormData(); for(var i= 0;i<count;i++){ form.append("file"+i, files[i]); } sendData(); } function sendData(){ var xhr = new XMLHttpRequest(); xhr.upload.addEventListener("progress", uploadProgress, false); xhr.addEventListener("load", uploadComplete, false); xhr.addEventListener("error", uploadFailed, false); xhr.open("POST", "/upload"); xhr.send(form); var progressBar = document.getElementById('progressBar'); progressBar.style.display = 'block'; progressBar.style.width = '0px'; }
演示在这里（http://flexinnerp.appspot.com/）只是喜欢它;:)
设置多个属性，如：
input type =“file”name =“file1”multiple =“multiple”class =“DropHere”
并使用这个CSS DropHere类：
.DropHere { height: 100px; padding: 3px; border: 2px dashed #555; border-radius: 5px; cursor: default; background-image:url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='100px' width='220px'><text x='55' y='75' font-size='20'>or drop files here</text></svg>"); background-repeat: no-repeat; }
文件字段现在看起来像：
如果你使用asp.net，你也可能喜欢这篇文章，我写了“多file upload与进度条，并拖放”： http : //www.codeproject.com/Articles/818561/Multiple-file-upload-with-progress -bar和拖动安
