本篇文章给大家分享的是有关使用JavaScript如何实现一个文件拖拽上传功能,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
专注于为中小企业提供网站设计、成都网站设计服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业丰泽免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了近1000家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
具体如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net JS文件拖拽上传</title> <style> div{ width: 300px; height: 300px; border:1px dashed #000; position:absolute; top: 50%; left: 50%; margin:-150px 0 0 -150px; text-align:center; font:20px/300px '微软雅黑'; display:none; } </style> <script> window.onload = function () { var oBox = document.getElementById('box'); var oM = document.getElementById('m1'); var timer = null; document.ondragover = function(){ clearTimeout(timer); timer = setTimeout(function(){ oBox.style.display = 'none'; },200); oBox.style.display = 'block'; }; //进入子集的时候 会触发ondragover 频繁触发 不给ondrop机会 oBox.ondragenter = function(){ oBox.innerHTML = '请释放鼠标'; }; oBox.ondragover = function(){ return false; }; oBox.ondragleave = function(){ oBox.innerHTML = '请将文件拖拽到此区域'; }; oBox.ondrop = function(ev){ var oFile = ev.dataTransfer.files[0]; var reader = new FileReader(); //读取成功 reader.onload = function(){ console.log(reader); }; reader.onloadstart = function(){ alert('读取开始'); }; reader.onloadend = function(){ alert('读取结束'); }; reader.onabort = function(){ alert('中断'); }; reader.onerror = function(){ alert('读取失败'); }; reader.onprogress = function(ev){ var scale = ev.loaded/ev.total; if(scale>=0.5){ alert(1); reader.abort(); } oM.value = scale*100; }; reader.readAsDataURL(oFile,'base64'); return false; }; }; </script> </head> <body> <meter id="m1" value="0" min="0" max="100"></meter> <div id="box">请将文件拖拽到此区域</div> </body> </html>
以上就是使用JavaScript如何实现一个文件拖拽上传功能,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。
新闻名称:使用JavaScript如何实现一个文件拖拽上传功能
本文来源:https://www.cdcxhl.com/article4/jgeioe.html
成都网站建设公司_创新互联,为您提供移动网站建设、面包屑导航、网站内链、响应式网站、网站导航、建站公司
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联