js实现拖拽上传图片功能
2017-08-01 09:24
951 查看
直接把本地图片拉到你设定的图片上传成功后的位置,就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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- fileuploadJs+JcropJs+php综合小应用 实现图片拖拽上传与裁剪功能的demo
- 实现JS上传图片预览功能
- js实现IE7图片上传预览的功能代码
- vue.js 实现图片本地预览 裁剪 压缩 上传功能
- Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
- JS实现的文件拖拽上传功能示例
- node.js中实现kindEditor图片上传功能的方法教程
- js实现前端图片上传即时预览功能
- php + js 实现拖拽上传 以及 复制粘贴上传图片
- ASP.NET MVC中使用Dropzone.js实现图片的批量拖拽上传
- js实现图片上传并预览功能
- Vue2.0实现调用摄像头进行拍照功能以及图片上传功能引用exif.js(2)
- JS和Canvas实现图片的预览压缩和上传功能
- 类似新浪微博和google图片的HTML5实现图片拖拽上传功能
- js图片上传预览功能兼容实现
- js实现图片上传预览功能
- node.js+express 实现CSDN上传头像功能 (包含图片的缩放,生成头像缩略图)
- cropper js基于vue的图片裁剪上传功能的实现代码
- 图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
- vue.js 图片上传并预览及图片更换功能的实现代码