使用firefox/safari/IE获取drop输入

Get drop input with firefox/safari/IE

本文关键字：drop 输入 获取 safari firefox 使用 IE      更新时间：2023-09-26

我写了一个小脚本，通过在隐藏的input中放入div来获得文件输入。我的代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>drop</title>
</head>
<body>
<div id="dropzone" style="height: 200px; width: 200px; background-color: green;">
drop here
</div>
<input type="file" id="file" class="hidden">
<script type="text/javascript" src="jquery-min.js"></script>
<script type="text/javascript" src="drop.js"></script>
</body>
</html>

drop.js:

$(document).on("dragover drop", function(e) {
    e.preventDefault(); // allow dropping and don't navigate to file on drop
})
$("#dropzone").on("drop", function(e) {
    console.log("drop");
    $("#file").prop("files", e.originalEvent.dataTransfer.files); // put files into element
    this.style.backgroundColor='green';
});
$("#dropzone").on("dragover", function(e){
    console.log("dragover");
    this.style.backgroundColor='blue';
});
$("#dropzone").on("dragleave", function(e){
    console.log("dragleave");
    this.style.backgroundColor='green';
});

这适用于Chrome，但不幸的是，不适用于firefox和safari，我预计也不适用于IE。。。我知道这是每个网络开发人员都喜欢的东西，所以我应该坚持原生的方式吗？或者有没有一个图书馆可以帮我做跨浏览器的东西？所以我只需要这一部分，不需要上传或其他什么，只需要将信息放在输入字段中。

这个问题以前已经通过各种javascript库解决了，这些库还可以确保文件上传在所有浏览器中都能工作。按照目前的情况，一旦你完善了你的脚本，它将只能在支持File/Blobneneneba API的浏览器中工作。这就排除了IE9和更早版本，以及一些安卓版本。

没有必要重新发明轮子。如果你坚持要这样做，就要为一场令人沮丧的磨难做好准备。我推荐Fine Uploader，它将处理在支持File API的浏览器中丢弃的文件，在Chrome 21+中丢弃的目录，并将为不支持File API的浏览器使用文件输入元素。它还包括许多其他可能有用的功能，如分块、自动/手动重试失败的上传、自动恢复以前会话中失败或中断的上传等。

尝试查看预构建的包，如http://blueimp.github.com/jQuery-File-Upload/

相关文章：