在Google Chrome / Chromium和Safari中拖放文件上传？

小编典典

在Google Chrome / Chromium和Safari中拖放文件上传？

ajax

拖放文件上传可以在Firefox 3.6中完成。

所有这些指南都使用FileReader（或不推荐使用Firefox 3.6 getAsBinary，也没有其他浏览器支持）。

但是，Google最近发布了Gmail更新，该更新允许在Chromium和Firefox中上传和拖放文件，而Chromium没有FileReader。我每晚都使用最新的Chromium，它可以拖放上传文件，但不支持FileReader。

我见过有人提到，可以通过拖放到上进行拖放上载<input type="file" />，但一次只能支持一个文件，而Gmail的上载器可以处理被拖放到其上的多个文件，因此显然不是它们在做。

所以问题是，他们怎么做到的？您如何支持Chromium上载HTML5文件？另外，您可以支持Safari吗？

阅读 432

2020-07-26

共1个答案

小编典典

警告： 这是非常旧版本的Safari和Chrome的兼容性代码。 现代的浏览器都支持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使用的方法，但它当然也可以使用。

2020-07-26