h5拖放-上传图片预览功能
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#div{
width: 200px;
height: 200px;
background: red;
margin: 100px;
}
</style>
<script>
/* dataTransfer对象：
1.files:获取外部拖拽的文件，返回一个filesList列表，是对象集合，自然有length属性；
2.filesList下有个type属性，返回文件的类型；
3.fileReader:读取文件信息
①readAsDataURL(argument):参数为读取的文件对象，将文件读取为DataUrl；
②onload:当文件读取成功时触发此事件；
③this.result:获取读取的文件数据，如果是图片，将返回base64格式的图片数据；
*/
onload= function () {
var oDiv=document.getElementById('div');
var oUl=document.getElementById('ul');
oDiv.ondragenter= function () {
this.innerHTML='现在可以释放文件了';
}
oDiv.ondragover= function (ev) {
ev=ev||event;
ev.preventDefault();
}
oDiv.ondragleave= function () {
this.innerHTML='将文件拖放到此区域';
}
oDiv.ondrop= function (ev) {
ev=ev||event;
ev.preventDefault(); //浏览器的默认行为是：将图片文件拖放到此处会在浏览器中打开图片
var fs=ev.dataTransfer.files;
//console.log(fs.length);
//console.log(fs[0].type);
for(var i= 0,len=fs.length;i<len;i++){
/* indexOf(searchvalue,formindex):返回某个指定的字符串值在字符串中首次出现的位置。
1.searchvalue:规定需检索的字符串类型；
formindex：可选的整数参数，规定在字符串中需检索的位置，它的合法取值是0-stringObject.length-1,如果省略此参数，则将从字符串的首字符开始检索；
2.该方法将从头到尾地检索字符串 stringObject，看它是否含有子串 searchvalue。开始检索的位置在字符串的 fromindex 处或字符串的开头（没有指定 fromindex 时）。
如果找到一个 searchvalue，则返回 searchvalue 的第一次出现的位置。stringObject 中的字符位置是从 0 开始的。
3.indexOf()对大小写敏感；
4.如果要检索的字符串没有出现，则返回-1；
*/
if(fs[i].type.indexOf('image')!==-1){
var fd = new FileReader();
fd.readAsDataURL(fs[i]);
fd.onload= function () {
//console.log(this.result);
var oLi=document.createElement('li');
var oImg=document.createElement('img');
oImg.src=this.result;
oUl.appendChild(oLi);
oLi.appendChild(oImg);
}
}else{
alert('亲，请上传图片！');
}
}
}
}
</script>
</head>
<body>
<div id="div">将文件拖放到此区域</div>
<ul id="ul"></ul>
</body>
</html>
h5拖放-上传图片预览功能的更多相关文章
- HTML5上传图片预览功能
HTML5上传图片预览功能 HTML代码如下: <!-- date: 2018-04-27 14:41:35 author: 王召波 descride: HTML5上传图片预览功能 --> ...
- JS 上传图片 + 预览功能（一）
JS 上传图片 + 预览功能 <body> <input type="file" id="fileimg1" style="disp ...
- 【小月博客】用HTML5的File API做上传图片预览功能
前段时间做了一个项目,涉及到上传本地图片以及预览的功能,正好之前了解过 html5(点击查看更多关于web前端的有关资源) 可以上传本地图片,然后再网上看了一些demo结合自己的需求,终于搞定了.(P ...
- 通过HTML5 FileReader实现上传图片预览功能
原文:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201706224590.html 在上传图片到服务器之前,我们希望可以预览一下要上传的图片. ...
- 关于H5里的API，上传图片预览功能
FileReader:读取本地图片文件并显示 写在开头 之前公司要求做一个H5页面,功能是照相和选择相册相片,并且能在屏幕上预览.然后我就傻里吧唧的各种找插件,因为有些插件不适配手机的型号,安卓机基本 ...
- HTML5拖放事件-上传图片预览功能
主要用到的知识点有dataTransfer对象和FileReader(读取文件信息) 1.创建简单的HTML标签: <body> <div id="box"> ...
- JS 上传图片 + 预览功能（二）
简单粗暴 直接进入主题: Html <script src="../js/jquery-2.1.1.min.js"></script> <style& ...
- 简单实现JS上传图片预览功能
HTML代码 <div class="upload"> <input type="button" class="btn" ...
- vue 结合 FileReader() 实现上传图片预览功能
项目中 身份证上传需求: <div class="ID_pic_wrap"> <ul> <li> <img src="../.. ...
随机推荐
- uboot里读sd卡内容
1. sd卡升级命令 mmcinit 0 fatload mmc 0:1 0 uzImage.bin 80000 fatload mmc 0:1 1000000 initrd.gz 580000 bo ...
- This Android SDK requires Android Developer Toolkit version 23.0.0 or above
2014-07-05 12:58 6445人阅读 评论(1) 收藏 举报 This Android SDK requires Android Developer Toolkit version 23. ...
- win7（64位）+IE8+QC9.0
环境win7(64位)+IE8+QC9.0出现的问题IE8访问QC9.0有时访问登录显示正常,但是有时访问QC页面无法显示正常,然后在ie8中安全中设置“启用内存保护帮助减少联机攻击*”也无法找到该项 ...
- 在 MacOS 上编译链接 OpenGL 程序
几个星期以前开始折腾在我的MBA上写 OpenGL 小程序.我不太熟悉MacOS上的开发工具比如XCode,所以一开始的想法就是用vim来写程序,然后手工编译链接.网上查了一下,MacOS上的Open ...
- NOIP2005 过河
过河 (river.pas/c/cpp) [问题描述] 在河上有一座独木桥,一只青蛙想沿着独木桥从河的一侧跳到另一侧.在桥上有一些石子,青蛙很讨厌踩在这些石子上.由于桥的长度和青蛙一次跳过的距离都是正 ...
- javascript设计模式8
桥接模式(将抽象与其实现隔离开来,以便二者独立变化) function sendInfo(element){ var id=element.id; ajax("GET"," ...
- 命令cp
cp 源 目标cp -r 递归复制整个目录cp -v 显示复制的详细信息
- 取得Resultset的记录条数
public Boolean exists(String sql) { try { stm = conn.createStatement( java.sql.ResultSet.TYPE_SCROLL ...
- android NDK 实用学习（二）-java端对象成员赋值和获取对象成员值
1,关于java端类及接口定义请参考: android NDK 实用学习-获取java端类及其类变量 2,对传过来的参数进行赋值: 对bool类型成员进行赋值 env->SetBooleanF ...
- 图解Java字符串不变性
1. 声明字符串 String s = "abcd"; 这里,s存储了“abcd”在这个字符串对象的引用,如下图所示: 2. 将字符串变量s赋值给字符串变量s2 String s2 ...