Question

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

<!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上...我知道这是每个Web开发人员喜欢的东西，所以我应该坚持本土方式吗？还是有一个图书馆可以帮我处理跨浏览器的东西？所以我只需要这个部分没有上传或者其他只是通过drop在输入字段中输入信息。

Answer 1

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

Answer 2

以前通过各种javascript库解决了这个问题，这些库也确保文件上传可以在所有浏览器中使用。就目前而言，一旦完善，您的脚本将仅适用于支持File / Blob API的浏览器。这省略了IE9及更早版本以及Android的某些版本。

无需重新发明轮子。如果你坚持这样做，请做好准备迎接令人沮丧的磨难。我建议使用Fine Uploader，它将在支持File API的浏览器中处理已删除的文件，在Chrome 21+中删除目录，并为不支持File API的浏览器使用文件输入元素。它还包括许多其他您可能非常有用的功能，例如分块，自动/手动重试失败的上传，自动恢复失败或中断的上一次会话等等。

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

2 个答案: