主要用到的知识点有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拖放事件-上传图片预览功能的更多相关文章

  1. 通过HTML5 FileReader实现上传图片预览功能

    原文:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201706224590.html 在上传图片到服务器之前,我们希望可以预览一下要上传的图片. ...

  2. HTML5上传图片预览功能

    HTML5上传图片预览功能 HTML代码如下: <!-- date: 2018-04-27 14:41:35 author: 王召波 descride: HTML5上传图片预览功能 --> ...

  3. JS 上传图片 + 预览功能（一）

    JS 上传图片 + 预览功能 <body> <input type="file" id="fileimg1" style="disp ...

  4. 【小月博客】用HTML5的File API做上传图片预览功能

    前段时间做了一个项目,涉及到上传本地图片以及预览的功能,正好之前了解过 html5(点击查看更多关于web前端的有关资源) 可以上传本地图片,然后再网上看了一些demo结合自己的需求,终于搞定了.(P ...

  5. 关于H5里的API，上传图片预览功能

    FileReader:读取本地图片文件并显示 写在开头 之前公司要求做一个H5页面,功能是照相和选择相册相片,并且能在屏幕上预览.然后我就傻里吧唧的各种找插件,因为有些插件不适配手机的型号,安卓机基本 ...

  6. h5拖放-上传图片预览功能

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  7. JS 上传图片 + 预览功能（二）

    简单粗暴 直接进入主题: Html <script src="../js/jquery-2.1.1.min.js"></script> <style& ...

  8. 简单实现JS上传图片预览功能

    HTML代码 <div class="upload"> <input type="button" class="btn" ...

  9. vue 结合 FileReader() 实现上传图片预览功能

    项目中 身份证上传需求: <div class="ID_pic_wrap"> <ul> <li> <img src="../.. ...

随机推荐

  1. 微信小程序之----消息提示框toast

    toast toast为消息提示框,无按钮,如需关闭弹框可以添加事件设置hidden为true,在弹框显示后经过duration指定的时间后触发bindchange绑定的函数. 官方文档 .wxml ...

  2. MVC笔记2:mvc+jquery.validate.js 进行前端验证

    1.引用如下js和css 代码 <link href="@Url.Content("~/Content/Site.css")" rel="sty ...

  3. Java解析JSON文件的方法（一）

    一.首先需要在Eclipse工程中导入相关的jar包,jar包参见链接:http://yunpan.alibaba-inc.com/share/link/NdA5b6IFK 二.提供一份待解析的jso ...

  4. GB和GBDT 算法流程及分析

    1.优化模型的两种策略: 1)基于残差的方法 残差其实就是真实值和预测值之间的差值,在学习的过程中,首先学习一颗回归树,然后将“真实值-预测值”得到残差,再把残差作为一个学习目标,学习下一棵回归树,依 ...

  5. SQL数据库置疑修复

    SQL数据库置疑修复 首先分析数据库置疑的原因,查明原因分析数据库置疑修复的方法,解决置疑后,考虑数据库置疑的预防方案.   数据库置疑产生的原因: 1.sql所在分区空间是否够?数据库文件大小是否达 ...

  6. iOS 之 微信开发流程

    第1阶段 注册开放平台帐号 注册成为微信开放平台开发者 立即注册 认证开发者资质 开发者资质认证通过后才可申请微信支付,申请审核服务费:300元/次 立即认证 创建APP并提交审核 提交你的APP基本 ...

  7. 云脉推出表格识别API接口可以自助接入

    针对如今市场上对于海量票据信息的录入需求,近期厦门云脉技术有限公司推出票据识别相关的产品与服务,更是在云脉OCR SDK开发者平台上上线表格识别API接口,供广大开发者和集成商自助接入.为了降低财务系 ...

  8. Mysql死锁问题解决方式 & 聚簇索引、隔离级别等知识

    参考了这篇文章:http://www.cnblogs.com/LBSer/p/5183300.html  <mysql死锁问题分析> 写的不错. 如果Mysql死锁,会报出: 1.1 死锁 ...

  9. Intel为什么做不好手机CPU？

    Intel大名鼎鼎,在CPU界无人不知无人不晓,然而在当前主流的手机CPU市场上却是远远落后日本的ARM公司,这到底是Intel技术不足,还是ARM过于强大呢,今天我们就来探讨一下. 故事要从2006 ...

  10. Myeclipse快捷键集合

    Ctrl+1 快速修复(最经典的快捷键,就不用多说了)Ctrl+D: 删除当前行 Ctrl+Alt+↓ 复制当前行到下一行(复制增加)Ctrl+Alt+↑ 复制当前行到上一行(复制增加)Alt+↓ 当 ...