大佬教程收集整理的这篇文章主要介绍了在Google Chrome / Chromium和Safari中拖放文件上传？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
警告： 现代的浏览器都支持fileReader API。这是一个教程：https : //developer.mozilla.org/zh- CN/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>
可以设置输入元素的样式，使其具有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"/>元素上），并且可以与dropfirefox 3.6+ 的HTML5 事件结合使用。
我无法确定这是否是Gmail使用的方法，但它当然也可以使用。
拖放文件上传可以在Firefox 3.6中完成。
通过Google搜索 html5拖放文件上传-
gmail，可以看到以下 内容：
所有这些指南都使用FileReader（或不推荐使用Firefox 3.6 getAsBinary，也没有其他浏览器支持）。
但是，Google最近发布了Gmail更新，该更新允许在Chromium和Firefox中上传和拖放文件，而Chromium没有FileReader。我每晚都使用最新的Chromium，它可以拖放上传文件，但不支持FileReader。
我见过有人提到，可以通过拖放到上进行拖放上载<input type="file"
/>，但一次只能支持一个文件，而Gmail的上载器可以处理被拖放到其上的多个文件，因此显然不是它们在做。
所以问题是，他们怎么做到的？您如何支持Chromium上载HTML5文件？另外，您可以支持Safari吗？
以上是大佬教程为你收集整理的在Google Chrome / Chromium和Safari中拖放文件上传？全部内容，希望文章能够帮你解决在Google Chrome / Chromium和Safari中拖放文件上传？所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。