Javascript 使用firefox/safari/IE获取直接输入
我编写了一个小脚本,通过在一个隐藏的Javascript 使用firefox/safari/IE获取直接输入,javascript,cross-browser,Javascript,Cross Browser,我编写了一个小脚本,通过在一个隐藏的input中插入div来获取文件输入。我的代码如下所示: <!DOCTYPE html> <html> <head> <title>drop</title> </head> <body> <div id="dropzone" style="height: 200px; width: 200px; background-color: green;"> dro
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>
这在Chrome上有效,但不幸的是在firefox和safari上不行,我希望在IE上也不行。。。我知道这是每个网络开发者都喜欢的东西,所以我应该坚持原生方式吗?或者有没有一个图书馆可以帮我解决跨浏览器的问题?因此,我只需要这一部分,不需要上传,或者其他什么,只需将信息通过拖放方式放入一个输入字段。尝试查看一个预构建的包,比如这个问题以前已经通过各种javascript库解决,这些库也确保文件上传在所有浏览器中都能正常工作。目前,您的脚本一旦完善,就只能在支持File/blobapi的浏览器中工作。这就排除了IE9和更早版本,以及一些Android版本 不需要重新发明轮子。如果你坚持这样做,就要为一场令人沮丧的磨难做好准备。我建议,它将在支持文件API的浏览器中处理删除的文件,在Chrome 21+中处理删除的目录,并将在不支持文件API的浏览器中使用文件输入元素。它还包括许多其他可能非常有用的功能,例如分块、自动/手动重试失败的上载、自动恢复以前会话中失败或中断的上载等
$(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';
});