我写了一个div通过隐藏input中的div中的drop来获取文件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 in输入字段放置信息。
I wrote a little script to get file input via drop in a div in a hidden input. My code looks like this:
<!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'; });This works on Chrome but unfortunately not on firefox and safari and i expect also not on IE ... I know this is the stuff every Webdeveloper loves, so should i stick with the native way ? or is there a library which can help me with the cross browser stuff ? So i just need this part no upload or sth else just putting the informatipn via drop in a input field.
最满意答案
以前通过各种javascript库解决了这个问题，这些库也确保文件上传可以在所有浏览器中使用。 就目前而言，一旦完善，您的脚本将仅适用于支持File / Blob API的浏览器。 这省略了IE9及更早版本以及Android的某些版本。
无需重新发明轮子。 如果你坚持这样做，请做好准备迎接令人沮丧的磨难。 我推荐Fine Uploader ，它将在支持File API的浏览器中处理删除的文件，在Chrome 21+中删除目录，并为不支持File API的浏览器使用文件输入元素。 它还包括许多其他您可能非常有用的功能，例如分块，自动/手动重试失败的上传，自动恢复失败或上次会话中断的中断等。
This problem has been solved before by various javascript libraries that also ensure file uploading will work in all browsers. As it stands, your script, once you perfect it, will only work in browsers that support the File/Blob API. This leaves out IE9 and earlier, along with some versions of Android.
No need to reinvent the wheel. If you insist on doing this, be prepared for a frustrating ordeal. I recommend Fine Uploader, which will handle dropped files in browsers that support the File API, dropped directories in Chrome 21+, and will resort to a file input element for browsers that do not support the File API. It also includes many other features that you may fine useful, such as chunking, auto/manual retry of failed uploads, auto resume of failed or interrupted uploads from previous sessions, etc.
更多推荐
drop,style,input,电脑培训,计算机培训,IT培训"/> <meta name="description&
发布评论