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 相关文章推荐
JavaScript CSS菜单功能 改进版
Dec 20 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
Apr 10 Javascript
JavaScript Sort 的一个错误用法示例
Mar 20 Javascript
JS动态修改图片的URL(src)的方法
Apr 01 Javascript
使用coffeescript编写node.js项目的方法汇总
Aug 05 Javascript
JS实现拖拽的方法分析
Dec 20 Javascript
react 父组件与子组件之间的值传递的方法
Sep 14 Javascript
Windows安装Node.js报错:2503、2502的解决方法
Oct 25 Javascript
vue-router2.0 组件之间传参及获取动态参数的方法
Nov 10 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
Dec 07 Javascript
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
微信小程序签到功能
Oct 31 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关联数组快速排序的方法
2015/04/17 PHP
PHP curl使用实例
2015/07/02 PHP
jquery DOM操作 基于命令改变页面
2010/05/06 Javascript
JavaScript 基础篇(一)
2012/03/30 Javascript
js 判断浏览器使用的语言示例代码
2014/03/22 Javascript
JS实现5秒钟自动封锁div层的方法
2015/02/20 Javascript
jQuery on()方法使用技巧详解
2015/04/16 Javascript
jQuery实现鼠标经过提示信息的地图热点效果
2015/04/26 Javascript
jQuery三级下拉列表导航菜单代码分享
2020/04/15 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
2016/01/05 Javascript
JS未跨域操作iframe里的DOM
2016/06/01 Javascript
ng2学习笔记之bootstrap中的component使用教程
2017/03/09 Javascript
jquery+css实现下拉列表功能
2017/09/03 jQuery
从零开始最小实现react服务器渲染详解
2018/01/26 Javascript
浅谈实现vue2.0响应式的基本思路
2018/02/13 Javascript
vue实现鼠标移入移出事件代码实例
2019/03/27 Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
2019/04/24 Javascript
JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】
2020/05/12 Javascript
python读写文件操作示例程序
2013/12/02 Python
python实现用于测试网站访问速率的方法
2015/05/26 Python
使用Django2快速开发Web项目的详细步骤
2019/01/06 Python
python写入文件自动换行问题的方法
2019/07/05 Python
Tensorflow实现神经网络拟合线性回归
2019/07/19 Python
python解析yaml文件过程详解
2019/08/30 Python
iphoneX 适配客户端H5页面的方法教程
2017/12/08 HTML / CSS
美国巧克力喷泉品牌:Sephra
2019/05/05 全球购物
时尚孕妇装:HATCH Collection
2019/09/24 全球购物
Stio官网:男女、儿童户外服装
2019/12/13 全球购物
销售文员岗位职责
2013/11/29 职场文书
《孔子拜师》教学反思
2014/02/24 职场文书
班级寄语大全
2014/04/10 职场文书
乡镇干部先进性教育活动个人整改措施
2014/09/16 职场文书
政府个人对照检查材料思想汇报
2014/10/08 职场文书
大学校园招聘会感想
2015/08/10 职场文书
 Python 中 logging 模块使用详情
2022/03/03 Python
CKAD认证中部署k8s并配置Calico插件
2022/03/31 Servers