可以请求HTML5文件拖放实现的一个很好的工作示例吗?如果从外部应用程序(Windows资源管理器)到浏览器窗口执行拖放操作,则源代码应该可以工作。它应该尽可能多的浏览器。
我想要一个很好的解释的示例代码。我不想使用第三方库,因为我需要根据我的需要修改代码。代码应该基于HTML5和JavaScript。我不想使用JQuery。
我花了整整一天寻找材料的好材料,但令人惊讶的是,我没有找到任何好的东西。我发现这些示例在Mozilla上工作,但对Chrome无效。
解决方法
这是一个非常简单的例子。它显示一个红色的方块。如果您将图像拖放到红色方块上,它将其附加到身体。我已经确认它在IE11,Chrome 38和Firefox 32中有效。有关更详细的说明,请参阅
Html5Rocks文章。
var dropZone = document.getElementById('dropZone'); // Optional. Show the copy icon when dragging over. Seems to only work for chrome. dropZone.addEventListener('dragover',function(e) { e.stopPropagation(); e.preventDefault(); e.dataTransfer.dropEffect = 'copy'; }); // Get file data on drop dropZone.addEventListener('drop',function(e) { e.stopPropagation(); e.preventDefault(); var files = e.dataTransfer.files; // Array of all files for (var i=0,file; file=files[i]; i++) { if (file.type.match(/image.*/)) { var reader = new FileReader(); reader.onload = function(e2) { // finished reading file data. var img = document.createElement('img'); img.src= e2.target.result; document.body.appendChild(img); } reader.readAsDataURL(file); // start reading the file data. } } });
<div id="dropZone" style="width: 100px; height: 100px; background-color: red"></div>
原文地址:https://www.jb51.cc/html5/169078.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。