js实现拖拽上传图片功能
更新时间：2017年08月01日 09:24:17 作者：赛赛大人
这篇文章主要为大家详细介绍了js实现拖拽上传图片功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
直接把本地图片拉到你设定的图片上传成功后的位置，就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中对象的本质、对象与类的关系、对象与引用类型的关系;对象属性如何进行分类;属性中特性进行介绍。感兴趣的朋友可以看下2016-12-12
这篇文章主要介绍了JS实现微信 "炸屎"大作战,本文通过实例代码图文展示给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-07-07
TabBar 红点提醒,很多小程序都需要这个功能比如聊天小程序,电商小程序等,这时候我们需要进行自定义 TabBar,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-05-05
通常大多数浏览器是并行下载资源的，但由于外部脚本的特殊性例如通过脚本改变文档的DOM结构、脚本之间的存在依赖关系、使用document.write 向页面输出HTML等。2011-04-04
这篇文章主要介绍了如何threejs利用indexeddb缓存加载glb模型问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
这篇文章主要介绍了微信小程序之发送短信倒计时功能,需要的朋友可以参考下2017-08-08
本文给大家讲述的是个人在一个项目中遇到的关于jsonp的post跨域问题的解决过程，这里记录下来，分项给大家。2015-07-07
这篇文章主要介绍了实例详解ECMAScript5中新增的Array方法的相关资料,需要的朋友可以参考下2016-04-04
项目中经常会遇到缩略展示文字的场景,即要求文字在一行不换行展示,超出自动展示...,常用的展示效果有两种,文字中间缩略以及文字末尾缩略,本文将通过代码示例给大家详细的讲一下这两种方案,需要的朋友可以参考下2024-06-06
用JavaScript实现仿Windows关机效果...2007-03-03
最新评论