这篇文章将为大家详细讲解有关js怎么实现拖拽上传图片功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
JS是JavaScript的简称,它是一种直译式的脚本语言,其解释器被称为JavaScript引擎,是浏览器的一部分,主要用于web的开发,可以给网站添加各种各样的动态效果,让网页更加美观。
具体代码如下
<!doctype html> <html> <head> <meta charset="utf-8"> <title>标题</title> <meta name="keywords" content=""> <meta name="description" content=""> <style> *{margin:0; padding:0; list-style:none;} #box{ width: 600px; height: 300px; background: #ccc; padding: 50px; } </style> </head> <body> <div id="box"></div> <script> var box=document.getElementById('box'); box.ondragover=function (e){ e.preventDefault(); } box.ondrop=function (e){ e.preventDefault(); // console.log(e.dataTransfer.files[0]); var f=e.dataTransfer.files[0];//获取到第一个上传的文件对象 var fr=new FileReader();//实例FileReader对象 fr.readAsDataURL(f);//把上传的文件对象转换成url fr.onload=function (e){ console.log(e); // var Url=e.target.result;//上传文件的URL var Url=this.result;//上传文件的URL box.innerHTML+='<img src="'+Url+'" alt="">'; } } </script> </body> </html>
关于“js怎么实现拖拽上传图片功能”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。