拖动和拖放文件上传谷歌浏览器/铬和Safari？ [英] Drag-and-drop file upload in Google Chrome/Chromium and Safari?
问题描述
拖和拖放文件的上传可以在Firefox 3.6来完成。
Drag-and-drop file uploading can be done in Firefox 3.6.
一个谷歌搜索的 HTML5拖放 - 和拖放文件上传-gmail 的给出了这样的话：
A Google search for html5 drag-and-drop file uploading -gmail gives things like:
- 本机拖动+拖放文件上传在Firefox 3.6
- <一个href="http://www.appelsiini.net/2009/10/html5-drag-and-drop-multiple-file-upload">http://www.appelsiini.net/2009/10/html5-drag-and-drop-multiple-file-upload
- <一个href="http://www.thecssninja.com/javascript/drag-and-drop-upload">http://www.thecssninja.com/javascript/drag-and-drop-upload
- Native Drag + Drop file upload in 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 （或pcated火狐3.6的德$ P $ getAsBinary ，其中没有其他的浏览器支持，要么）。
All of these guides use FileReader (or the Firefox 3.6's deprecated getAsBinary, which no other browser supports, either).
不过，谷歌最近发布了允许的拖动和拖放文件上传铬和Firefox浏览器的Gmail的更新和的铬并不具有的FileReader 。我使用的是最新的铬夜间，它可以拖放上传文件，虽然不支持的FileReader 。
However, Google recently released an update for Gmail that allowed drag-and-drop file uploading in Chromium as well as Firefox, and Chromium does not have FileReader. I'm using the latest Chromium nightly, and it can drag-drop upload files, while not supporting FileReader.
我看到有人提到，拖放上传可以通过拖动到可能的＆LT;输入类型=文件/＆GT; ，但只可以支持一个文件的时间，而Gmail的上传可以处理被拖到了多个文件，所以这显然不是他们在做什么。
I've seen someone mention that drag-drop uploading can be possible by dragging onto an <input type="file" />, but that can only support one file at a time, while Gmail's uploader can handle multiple files being dragged onto it, so that's clearly not what they're doing.
所以，问题是，他们怎么办呢？你如何支持铬对HTML5文件上传？此外，你能支持Safari浏览器？
So the question is, how do they do it? How do you support Chromium for HTML5 file uploading? In addition, can you support Safari?
推荐答案
编辑：谷歌Chrome浏览器现在支持的FileReader为版本7然而，这种解决办法仍然是必要的拖放和拖放在Safari 5上传（Safari浏览器6具有尚未发布）。
Google Chrome now supports FileReader as of version 7. However, this workaround is still necessary for drag-and-drop uploading in Safari 5 (Safari 6 has not been released yet).
一种可能性是使用在SwellJS所使用的方法的：
使用＆LT;输入类型=文件多个=多个/＆GT; 像这样：
<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>
输入元素可以样式有不透明度：0 和定位（绝对）在接受上传的元素。整个表单可以放在一个 IFRAME 里面的伪阿贾克斯之类的行为。而上传元素可以是一层隐藏，直到东西拖过了。
The input element can be styled to have opacity: 0 and positioned (absolutely) over an element that accepts uploads. The entire form can be placed inside an iframe for "pseudo-Ajax" like behavior. And the upload element can be a layer hidden until something is dragged over it.
这样一个iframe看起来像：
Such an iframe would look like:
<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浏览器检测到这应该只能做（因为其他的浏览器不支持拖放和拖放到＆LT;输入类型=文件/＆GT; 元素），并且可以结合使用HTML5的降事件火狐3.6 +。
This should only be done when Safari or Chrome is detected (since other browsers don't support drag-and-drop onto <input type="file" /> elements), and can be used in combination with the HTML5 drop event for Firefox 3.6+.
我不知道这是否是方法Gmail使用，但可以肯定的作品大约为好。
I can't tell if this is the method Gmail uses, but it certainly works about as well.
这篇关于拖动和拖放文件上传谷歌浏览器/铬和Safari？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
