js实现拖拽上传图片功能


Posted in Javascript onAugust 01, 2017

直接把本地图片拉到你设定的图片上传成功后的位置,就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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
页面使用密码保护代码
Apr 10 Javascript
js验证是否为数字的总结
Apr 14 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
Dec 24 Javascript
JS实现来回出现文字的状态栏特效代码
Oct 31 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
Jan 18 Javascript
使用jQuery UI库开发Web界面的简单入门指引
Apr 22 Javascript
Bootstrap3 多个模态对话框无法显示的解决方案
Feb 23 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
Jan 08 Javascript
深入剖析Node.js cluster模块
May 23 Javascript
JavaScript常用数组操作方法,包含ES6方法
May 10 Javascript
基于Three.js实现360度全景图片
Dec 30 Javascript
微信小程序的引导页实现代码
Jun 24 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 #jQuery
angularjs2 ng2 密码隐藏显示的实例代码
Aug 01 #Javascript
使用JavaScript进行表单校验功能
Aug 01 #Javascript
SpringMVC简单整合Angular2的示例
Jul 31 #Javascript
vue.js声明式渲染和条件与循环基础知识
Jul 31 #Javascript
在ABP框架中使用BootstrapTable组件的方法
Jul 31 #Javascript
knockoutjs模板实现树形结构列表
Jul 31 #Javascript
You might like
初级的用php写的采集程序
2007/03/16 PHP
php学习 函数 课件
2008/06/15 PHP
php图片处理函数获取类型及扩展名实例
2014/11/19 PHP
Linux系统下PHP-FPM的安装和配置教程
2015/08/17 PHP
laravel自定义分页的实现案例offset()和limit()
2019/10/15 PHP
关于include标签导致js路径找不到的问题分析及解决
2013/07/09 Javascript
javascript跨浏览器的属性判断方法
2014/03/16 Javascript
用原生js做个简单的滑动效果的回到顶部
2014/10/15 Javascript
javascript+canvas制作九宫格小程序
2014/12/28 Javascript
纯javascript判断查询日期是否为有效日期
2015/08/24 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
2015/09/18 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
2016/03/01 Javascript
ES6中Math对象的部分扩展
2017/02/20 Javascript
vue2.0模拟锚点的实例
2018/03/14 Javascript
详解Javascript中new()到底做了些什么?
2018/03/29 Javascript
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
2019/01/07 Javascript
基于JS实现web端录音与播放功能
2019/04/17 Javascript
小程序封装路由文件和路由方法(5种全解析)
2019/05/26 Javascript
Vue实现仿iPhone悬浮球的示例代码
2020/03/13 Javascript
原生js实现的观察者和订阅者模式简单示例
2020/04/18 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
2020/05/23 Javascript
在Python中处理字符串之isdigit()方法的使用
2015/05/18 Python
python开发之str.format()用法实例分析
2016/02/22 Python
Python实现的当前时间多加一天、一小时、一分钟操作示例
2018/05/21 Python
对python3中的RE(正则表达式)-详细总结
2019/07/23 Python
Python求解排列中的逆序数个数实例
2020/05/03 Python
解决Windows下python和pip命令无法使用的问题
2020/08/31 Python
Pandas中DataFrame交换列顺序的方法实现
2020/12/14 Python
中国电子产品批发商/跨境电商/外贸网:Sunsky-online
2020/04/20 全球购物
优秀毕业生求职推荐信范文
2013/11/21 职场文书
怎样填写就业意向
2014/04/02 职场文书
法制宣传月活动方案
2014/05/11 职场文书
励志演讲稿大全
2014/08/21 职场文书
违反交通安全法检讨书
2014/10/24 职场文书
教师节简报
2015/07/20 职场文书
关于艺术节的开幕致辞
2016/03/04 职场文书