警告:这是非常旧版本的 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 结合使用drop
Firefox 3.6+ 的活动。
我不知道 Gmail 是否使用这种方法,但它确实也有效。