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去重的11种方式，各有优缺点，文中的示例代码讲解详细，具有一定的学习价值，需要的可以根据需求合理使用2023-06-06
javascript或asp实现的判断身份证号码是否正确两种验证方法
在网页中经常需要输入正确的身份证号码，只能通过程序来验证身份证格式。根据身份证号码生成的原理，就是验证后面几位就可以了。2009-11-11
朋友公司开发的在线JS加密站点，内测中，自己试过不能找到加密后的源代码，不知道还有那位大大能够破解2008-11-11
JavaScript学习笔记(三)：JavaScript也有入口Main函数
大家都知道在c和java中，有main函数货main方法作为一个程序的入口函数或方法。在JS中从js源文件的头部开始运行的，我们仍然可以虚构出一个main函数来作为程序的起点，这样一来不仅可以跟其他语言统一了，而且说不定你会对JS有更深的理解。感兴趣的小伙跟着小编一起学习吧2015-09-09
javascript中的nextSibling使用陷(da)阱(keng)
关于HTML/XML节点的问题，在IE中nextSibling不会返回文本节点，而chrome或者firefox等会返回文本节点2014-05-05
本篇文章主要介绍了p5.js入门教程之小球动画示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
void(0)用于执行某些处理，但是不整体刷新页面的情况下，下面小编就给大家详细介绍js中 javascript:void(0)的含义 ，需要的朋友可以参考下2015-08-08
关于浏览器退格键的禁用，可行的方法有很多，在本文将为大家详细介绍下在js中时如何做到的，有需求的各位可以参考下2013-10-10
今天小编就为大家分享一篇layui 设置table 行的高度方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要为大家详细介绍了JS实现灯泡开关特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
最新评论