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 相关文章推荐
Prototype 学习 工具函数学习($方法)
Jul 12 Javascript
JQuery的Alert消息框插件使用介绍
Oct 09 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
Dec 05 Javascript
js实现进度条的方法
Feb 13 Javascript
javascript瀑布流式图片懒加载实例解析与优化
Feb 23 Javascript
JS修改地址栏参数实例代码
Jun 14 Javascript
基于JavaScript实现跳转提示页面
Sep 24 Javascript
基于input框覆盖掉数字英文的实例讲解
Jul 21 Javascript
JS抛物线动画实例制作
Feb 24 Javascript
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
Aug 19 Javascript
node.js Promise对象的使用方法实例分析
Dec 26 Javascript
javascript绘制简单钟表效果
Apr 07 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设计模式 Strategy(策略模式)
2011/06/26 PHP
使用php判断网页是否gzip压缩
2013/06/25 PHP
Prototype使用指南之hash.js
2007/01/10 Javascript
推荐11款jQuery开发的复选框和单选框美化插件
2011/08/02 Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
2011/08/15 Javascript
基于jQuery实现图片的前进与后退功能
2013/04/24 Javascript
js 实现日期灵活格式化的小例子
2013/07/14 Javascript
js函数参数设置默认值的一种变通实现方法
2014/05/26 Javascript
js确认删除对话框适用于a标签及submit
2014/07/10 Javascript
nodejs下打包模块archiver详解
2014/12/03 NodeJs
JavaScript不使用prototype和new实现继承机制
2014/12/29 Javascript
百度地图自定义控件分享
2015/03/04 Javascript
jquery图片倾斜层叠切换特效代码分享
2015/08/27 Javascript
详解javascript实现自定义事件
2016/01/19 Javascript
AngularJS实现分页显示数据库信息
2016/07/01 Javascript
JS根据生日月份和日期计算星座的简单实现方法
2016/11/24 Javascript
浅谈一种让小程序支持JSX语法的新思路
2019/06/16 Javascript
[01:31]完美与DOTA2历程
2014/07/31 DOTA
Python中处理unchecked未捕获异常实例
2015/01/17 Python
Python中的错误和异常处理简单操作示例【try-except用法】
2017/07/25 Python
python3使用pyqt5制作一个超简单浏览器的实例
2017/10/19 Python
快速了解Python开发中的cookie及简单代码示例
2018/01/17 Python
Django中的forms组件实例详解
2018/11/08 Python
对Python中list的倒序索引和切片实例讲解
2018/11/15 Python
浅析Python与Mongodb数据库之间的操作方法
2019/07/01 Python
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
python操作toml文件的示例代码
2020/11/27 Python
Python3利用openpyxl读写Excel文件的方法实例
2021/02/03 Python
会计师职业生涯规划范文
2014/02/18 职场文书
学习交流会主持词
2014/04/01 职场文书
大学生演讲稿
2014/04/25 职场文书
农村环境卫生倡议书
2015/04/29 职场文书
Spring Boot两种全局配置和两种注解的操作方法
2021/06/29 Java/Android
Javascript的promise,async和await的区别详解
2022/03/24 Javascript
Python tensorflow卷积神经Inception V3网络结构
2022/05/06 Python
python pandas 解析(读取、写入)CSV 文件的操作方法
2022/12/24 Python