js实现拖拽上传图片功能

2019-11-19 15:56:09

字体：大中小

来源：转载

供稿：网友

直接把本地图片拉到你设定的图片上传成功后的位置，就ok了，具体代码如下

<!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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：使用重写url机制实现验证码换一张功能

下一篇：Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解