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 相关文章推荐
jQuery $.each的用法说明
Mar 22 Javascript
javascript特殊日历控件分享
Mar 07 Javascript
jQuery实现点击查看大图并以弹框的形式居中
Aug 08 Javascript
JavaScript登录验证码的实现
Oct 27 Javascript
Bootstrap源码解读按钮(5)
Dec 23 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
Jul 31 Javascript
详解React native全局变量的使用(跨组件的通信)
Sep 07 Javascript
详解Vue中localstorage和sessionstorage的使用
Dec 22 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
Sep 14 Javascript
JavaScript循环遍历你会用哪些之小结篇
Sep 28 Javascript
利用Promise自定义一个GET请求的函数示例代码
Mar 20 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
Jul 18 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 验证码实例代码
2010/06/01 PHP
PHP积分兑换接口实例
2015/02/09 PHP
php自定义函数实现汉字转换utf8编码的方法
2016/09/29 PHP
PHP新特性之字节码缓存和内置服务器
2017/08/11 PHP
javascript脚本调试方法小结
2008/11/24 Javascript
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
2010/07/24 Javascript
jQuery.autocomplete 支持中文输入(firefox)修正方法
2011/03/10 Javascript
JQuery在页面中添加和除移DOM示例代码
2013/06/24 Javascript
简洁Ajax函数处理(示例代码)
2013/11/15 Javascript
纯javascript实现简单下拉刷新功能
2015/03/13 Javascript
jquery中trigger()无法触发hover事件的解决方法
2015/05/07 Javascript
JS代码实现table数据分页效果
2016/05/26 Javascript
JS 面向对象之继承---多种组合继承详解
2016/07/10 Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
2016/08/15 Javascript
jQuery模拟窗口抖动效果
2017/03/15 Javascript
vue2.0与bootstrap3实现列表分页效果
2017/11/28 Javascript
对vue里函数的调用顺序介绍
2018/03/17 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
2019/06/21 Javascript
构建Vue大型应用的10个最佳实践(小结)
2019/11/07 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
2020/05/28 Javascript
通过python下载FTP上的文件夹的实现代码
2013/02/10 Python
python中使用smtplib和email模块发送邮件实例
2014/04/22 Python
解决pytorch GPU 计算过程中出现内存耗尽的问题
2019/08/19 Python
Python3 合并二叉树的实现
2019/09/30 Python
Python中logging日志库实例详解
2020/02/19 Python
Python内置函数locals和globals对比
2020/04/28 Python
如何使用python自带IDLE的几种方法
2020/10/10 Python
python如何快速拼接字符串
2020/10/28 Python
Eyeko美国:屡获殊荣的睫毛膏、眼线笔和眉妆
2018/07/05 全球购物
高尔夫球鞋、服装、手套和装备:FootJoy
2018/12/15 全球购物
生育关怀行动实施方案
2014/03/26 职场文书
狮子林导游词
2015/02/03 职场文书
利用ajax+php实现商品价格计算
2021/03/31 PHP
golang elasticsearch Client的使用详解
2021/05/05 Golang
MySQL下使用Inplace和Online方式创建索引的教程
2021/05/26 MySQL
Python如何让字典保持有序排列
2022/04/29 Python