<!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拖放-上传图片预览功能的更多相关文章

  1. HTML5上传图片预览功能

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

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

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

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

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

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

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

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

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

  6. HTML5拖放事件-上传图片预览功能

    主要用到的知识点有dataTransfer对象和FileReader(读取文件信息) 1.创建简单的HTML标签: <body> <div id="box"> ...

  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. 使用VS2010调用matlab的mat格式文件

    做实验需要将matlab实现的meanshift的结果中的region的Iabels矩阵,需要把labels.mat读入VS2010中,实现功能,在此把实现过程记录下来. C++读取mat文件的步骤如 ...

  2. CRC（Cyclic Redundancy Check)循环冗余校验码与海明码的计算题

    (17)采用CRC进行差错校验,生成多项式为G(X)=X4+X+1,信息码字为10111,则计算出的CRC校验码是  (17)  .A．0000  B．0100   C．0010   D．1100试题 ...

  3. 使用 EasyBCD 安装Ubuntu 14.04 Error 15: file not found错误的解决方法

    今天安装Window7 和 Ubuntu 14.04 双系统时,出现如下异常,记录一下. 安装过程是参考 http://www.linuxidc.com/Linux/2014-04/100369.ht ...

  4. NOIP2006 2k进制数

    2^k进制数 题目描述 设r是个2^k 进制数,并满足以下条件: (1)r至少是个2位的2^k 进制数. (2)作为2^k 进制数,除最后一位外,r的每一位严格小于它右边相邻的那一位. (3)将r转换 ...

  5. 2015长春 HDU 5534 Partial Tree

    题意:有n个结点,n-1条边,现在要把这n个结点连成一棵树,给定了f(i),表示度为i的结点的价值是f(i).现在问如何连能够使得Σf(i)的值最大. 思路:每个点至少一个度,所以可分配的度数为n-2 ...

  6. 【转载】IP首部、TCP首部、UDP首部

    [转载自]http://blog.csdn.net/hjffly/article/details/7959889 IP首部 版本:L3协议版本号,IPv4或IPv6 首部长度:单位为4字节 协议:L4 ...

  7. Petshop学习第一天

    1.PetShop的体系架构: 2.分层设计的目的: 分散关注.松散耦合.逻辑复用.标准定义 3.一些不明白的地方: item和product是什么关系??? Model类库中的Linq To Sql ...

  8. Tomcat普通用户部署教程（生产服务器）

    1.环境准备 JDK安装 解压     tar xf tomcat-xx.tar.gz -C /data/soft     cd /data/soft 重命名     mv tomcat-xx tom ...

  9. POJ3016-K-Monotonic（左偏树＋DP）

    我觉得我要改一下签名了……怎么会有窝这么啰嗦的人呢? 做这题需要先学习左偏树<左偏树的特点及其应用> 然后做一下POJ3666,这题的简单版. 思路: 考虑一下维护中位数的过程原数组为A, ...

  10. A Tour of Go Interfaces are satisfied implicitly

    A type implements an interface by implementing the methods. There is no explicit declaration of inte ...