HTML5拖放事件-上传图片预览功能
主要用到的知识点有dataTransfer对象和FileReader(读取文件信息)
1、创建简单的HTML标签：
<body>
<div id="box">请将图片拖拽至此</div>
<ul></ul>
</body>
2、给标签加上简单的样式：
<style type="text/css">
div{
width: 300px;
height: 300px;
margin:100px;
background: orange;
}
</style>
3、编写JS，用到四个拖放事件中的4个目标元素事件
dragenter事件：进入目标元素触发，改变div的innerHTML值：
var oDiv = document.getElementById('box');
var oUl = document.getElementsByTagName('ul')[0];
oDiv.ondragenter = function(){
this.innerHTML = '可以释放啦';
}
dragover事件：进入目标、离开目标之间，连续触发；注意：为什么要在这里加上这个事件？因为后续要触发drop事件的时候需要在dragover阻止，默认事件：
oDiv.ondragover = function( ev ){
ev.preventDefault();
}
dragleaver事件：离开目标元素触发
oDiv.ondragleave = function(){
this.innerHTML = '请将图片拖拽至此';
}
drop事件：在目标元素上释放鼠标触发
dataTransfer对象里面有一个files属性：获取外部拖拽的文件，返回一个filesList列表；filesList下有个type属性，返回文件的类型
oDiv.ondrop = function( ev ){
ev.preventDefault();
var fs = ev.dataTransfer.files;
// alert( fs.length )
// alert( fs[0].type )
for(var i=0; i<fs.length; i++){
if( fs[i].type.indexOf('image') != -1){ //利用返回的type属性值字符串包含image来判断文件类型
var fd = new FileReader(); //读取文件信息
fd.readAsDataURL( fs[i] ); //参数为读取的文件对象，将文件读取为DataURL
fd.onload = function(){ //当读取文件成功完成的时候触onload事件
var oImg = document.createElement('img');
var oLi = document.createElement('li');
oImg.src = this.result; //获取文件的数据，当文件是图片，返回base64的图片数据
oLi.appendChild(oImg);
oUl.appendChild(oLi);
}
}else{
alert('请上传图片类型！');
}
}
}
HTML5拖放事件-上传图片预览功能的更多相关文章
- 通过HTML5 FileReader实现上传图片预览功能
原文:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201706224590.html 在上传图片到服务器之前,我们希望可以预览一下要上传的图片. ...
- 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 ...
- 关于H5里的API，上传图片预览功能
FileReader:读取本地图片文件并显示 写在开头 之前公司要求做一个H5页面,功能是照相和选择相册相片,并且能在屏幕上预览.然后我就傻里吧唧的各种找插件,因为有些插件不适配手机的型号,安卓机基本 ...
- h5拖放-上传图片预览功能
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 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="../.. ...
随机推荐
- SVN打基线
分成trunk.tags.branches的话,那直接从trunk copy 到tags下面就可以或者按照你自己的目录,只要规定好就行 选择要打基线的项目的根目录,右击鼠标,在弹出的菜单中选择“分支/ ...
- IOS开发－ObjC－NSString
NSString是oc语言Foundation框架中常用的类,我根据每个方法的功能将NSString的常用方法分为创建字符串.初始化字符串.判断和比较字符串.大写和小写相互转化.字符串的截取.类型转换 ...
- 命名空间“Microsoft.AspNet”中不存在类型或命名空间名“Mvc”
问题: 错误 CS0234 命名空间"Microsoft.AspNet"中不存在类型或命名空间名"Mvc"(是否缺少程序集引用?) 解决方案: 打开文件夹 Us ...
- 文件查找和比较命令 来自: http://man.linuxde.net/find
文件查找和比较1.find命令,用来在指定目录下查找文件.任何位于参数之前的字符串都将被视为欲查找的目录名.如果使用该命令时不设置任何参数,则find命令则在当前目录下查找子目录与文件.并且将查到的子 ...
- Selenium2（java）selenium常用API 五
上传文件 元素标签是input时上传方式 上传是一个input,对于这种元素是input 的标签可以采用元素的sendKeys()方法来直接赋值,upload.html代码: <html&g ...
- 使用IDA静态分析解密《舰娘Collection》的lua脚本
好久没写东西了,换工作之后忙得一比.你说创业?风太大没听清啊看了看以前写的东西,觉得以前写得太严肃了,从现在开始要轻松一点,要做一名逗逼码农. 本文不会介绍破解的细节,最终完成破解所编写的代码也不会公 ...
- Div里面载入另一个页面的实现(取代框架)（AJax）
随着框架越来越不火了,HTML5就不对框架支持了,iframe也只有url了,Div就担当了此大任 DIV+CSS在页面部局确实也很让人满意,使用也更方便 今天突然遇到一个问题,那就是需要导入另一个页 ...
- MyBatis 使用foreach与其他方式的时候参数传递方式
Mapper文件: <select id="selectPersonByIds" parameterType="map" resultMap=" ...
- SpringMVC通过实体类返回json格式的字符串,并在前端显示
一.除了搭建springmvc框架需要的jar包外,还需要这两个jar包 jackson-core-asl-1.9.2.jar和jackson-mapper-asl-1.9.2.jar 二.web,. ...
- 理解Node.js的事件轮询
前言 总括 : 原文地址:理解Node.js的事件轮询 Node小应用:Node-sample 智者阅读群书,亦阅历人生 正文 Node.js的两个基本概念 Node.js的第一个基本概念就是I/O操 ...