栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

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

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

警告: 这是非常旧版本的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(); }"  />  </form></body>

仅当检测到Safari或Chrome时才应执行此操作(因为其他浏览器不支持拖放到

<input type="file"/>
元素上),并且可以与
drop
Firefox 3.6+ 的HTML5 事件结合使用。

我无法确定这是否是Gmail使用的方法,但它当然也可以使用。



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/367895.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号