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

2024-04-30

Firefox 3.6 中可以实现拖放文件上传。

给出类似的东西:

  • Firefox 3.6 中的本机拖放文件上传 https://stackoverflow.com/questions/2121018/native-drag-drop-file-upload-in-firefox-3-6
  • 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
  • http://www.thecssninja.com/javascript/drag-and-drop-upload http://www.thecssninja.com/javascript/drag-and-drop-upload

所有这些指南都使用FileReader(或者 Firefox 3.6 已弃用getAsBinary,其他浏览器也不支持)。

然而,Google 最近发布了 Gmail 的更新,允许在 Chromium 和 Firefox 中拖放文件上传,并且铬没有FileReader http://code.google.com/p/chromium/issues/detail?id=37785。我用的是最新的Chromium nightly,可以拖拽上传文件,但不支持FileReader.

我看到有人提到可以通过拖动到<input type="file" />,但这一次只能支持一个文件,而 Gmail 的上传器可以处理拖到其上的多个文件,所以这显然不是他们正在做的事情。

那么问题来了,他们是如何做到的呢?如何支持 Chromium 进行 HTML5 文件上传?另外,可以支持Safari吗?


警告:这是非常旧版本的 Safari 和 Chrome 的兼容性代码。现代浏览器都支持 FileReader API;这是一个教程:https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

现在,仅当出于某种原因您需要支持 Safari 5 及更早版本或 Chrome 6 及更早版本时,此代码才有用。


一种可能性是使用SwellJS中使用的方法 http://playground.justswell.org/drag-and-drop-file-upload.html:

Use <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" />elements),并且可以与 HTML5 结合使用dropFirefox 3.6+ 的活动。

我不知道 Gmail 是否使用这种方法,但它确实也有效。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 Google Chrome/Chromium 和 Safari 中拖放文件上传? 的相关文章

随机推荐