0

我写了一个小脚本来通过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 ......我知道这是每个 Webdeveloper 都喜欢的东西，所以我应该坚持使用原生方式吗？还是有一个库可以帮助我处理跨浏览器的东西？所以我只需要这部分没有上传或其他只是将informatipn通过放置在输入字段中。

4

2 回答 2

0

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

于 2013-02-11T19:29:46.523 回答
0

这个问题之前已经通过各种 javascript 库解决了，这些库也确保文件上传可以在所有浏览器中工作。就目前而言，您的脚本一旦完善，就只能在支持 File/Blob API 的浏览器中运行。这不包括 IE9 和更早版本，以及某些版本的 Android。

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

于 2013-02-11T20:10:44.607 回答