js怎么实现拖拽上传图片功能
墨初 Web前端 777阅读
写了一个在web页面中将图片拖动到某个div中进行上传的方法,是用原生的js代码实现的不需要其它的插件,下面是效果的示例代码。
js实现图片拖拽上传的方法
例:
<style> *{margin:0; padding:0; list-style:none;} #box{ width: 600px; height: 300px; background: #ccc; padding: 50px; } </style> <div id="box"></div> <script> var box=document.getElementById('box'); box.ondragover=function (e){ e.preventDefault(); } box.ondrop=function (e){ e.preventDefault(); 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>