js实现本地图片文件拖拽效果
更新时间：2017年07月18日 15:08:40 作者：输出是最好的学习
这篇文章主要为大家详细介绍了js实现本地图片文件拖拽效果，拖拽文件到指定位置，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
如何拖拽文件到指定位置，具体方法如下
在从本地上传图片的时候，如果使用拖拽效果，想想应该是更加的高大上，下面直接上代码
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#dropBox{
width: 300px;
height: 300px;
border:1px solid red;
font-size: 40px;
text-align: center;
background: lightyellow;
background-repeat: no-repeat;
background-size: 100%;
}
#dropBox div{
margin:50px auto;
width: 140px;
}
</style>
</head>
<body>
<div id="dropBox">
<div>拖动你的图片到这里</div>
</div>
<script type="text/javascript">
var dropBox;
window.onload=function(){
dropBox = document.getElementById("dropBox");
// 鼠标进入放置区时
dropBox.ondragenter = ignoreDrag;
// 拖动文件的鼠标指针位置放置区之上时发生
dropBox.ondragover = ignoreDrag;
dropBox.ondrop = drop;
}
function ignoreDrag(e){
// 确保其他元素不会取得该事件
e.stopPropagation();
e.preventDefault();
}
function drop(e){
e.stopPropagation();
e.preventDefault();
// 取得拖放进来的文件
var data = e.dataTransfer;
var files = data.files;
// 将其传给真正的处理文件的函数
var file = files[0];
var reader = new FileReader();
reader.onload=function(e){
dropBox.style.backgroundImage = "url('"+e.target.result+"')";
}
reader.readAsDataURL(file);
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了JS判断传入函数的参数是否为空(函数参数是否传递),需要的朋友可以参考下2023-05-05
使用PHP+JavaScript将HTML页面转换为图片的实例分享
这篇文章主要介绍了使用PHP+JavaScript将HTML元素转换为图片的实例分享,文后结果的截图只能体现出替换的字体,也不能说将静态页面转为图片可以加快加载,只是这种做法比较interesting XD需要的朋友可以参考下2016-04-04
bootstrap如何让dropdown menu按钮式下拉框长度一致
bootstrap框架提供了下拉菜单组件（dropdown），即点击一个元素或按钮，触发隐藏的列表显示出来。下面通过本文给大家介绍bootstrap如何让dropdown menu按钮式下拉框长度一致,需要的朋友可以参考下2017-04-04
javascript attachEvent和addEventListener使用方法
attachEvent与addEventListener区别 适应的浏览器版本不同，同时在使用的过程中要注意2009-03-03
通过为<tr>元素添加属性或类型选择器，再通过CSS设置可以实现双色表格，但如果表格很长，逐个元素添加可真麻烦。而且这样的代码维护起来不容易。所以比较好的方式是用JS实现。2009-11-11
在js中通过window.location.href控制页面跳转时，有时会跳转至缓存页面，并没有真正去请求要跳转的地址，导致页面数据未能及时加载刷新。怎么解决呢？下面小编给大家解答下2016-10-10
Echarts是由百度提供的数据可视化解决方案,下面这篇文章主要给大家介绍了关于echarts使用中关于y坐标轴无法正常显示的问题解决记录,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-12-12
这篇文章主要为大家详细介绍了JavaScript实现单英文金山打字通，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-06-06
这篇文章主要为大家介绍了JSON常用解析框架使用操作详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
TypeScript是一种由微软开发的开源、跨平台的编程语言。这篇文章主要介绍了TypeScript的安装、使用、自动编译的实现方法,需要的朋友可以参考下2020-04-04
最新评论