<!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. HDU 3007 Buried memory & ZOJ 1450 Minimal Circle

    题意:给出n个点,求最小包围圆. 解法:这两天一直在学这个神奇的随机增量算法……看了这个http://soft.cs.tsinghua.edu.cn/blog/?q=node/1066之后自己写了好久 ...

  2. [Bhatia.Matrix Analysis.Solutions to Exercises and Problems]ExI.4.5

    Suppose it is known that $\scrM$ is an invariant subspace for $A$. What invariant subspaces for $A\o ...

  3. Hessian介绍

    Hessian是什么   Hessian类似Web Service,是一种高效简洁的远程调用框架. Hessian的主页:http://hessian.caucho.com/   有关网上的对Hess ...

  4. 未能加载文件或程序集“WcfService”或它的某一个依赖项。试图加载格式不正确的程序。

    “/”应用程序中的服务器错误. 未能加载文件或程序集“WcfService”或它的某一个依赖项.试图加载格式不正确的程序. 说明: 执行当前 Web 请求期间,出现未经处理的异常.请检查堆栈跟踪信息, ...

  5. 进入IT行业，你后悔过吗？

    问:你曾后悔进入 IT 行业吗?为什么? 也许你后悔做了IT,但是很希望你能用自己混IT界的惨痛经历给题主这样的后来人提个醒. 也许你庆幸做了IT,同样很希望能够看到同行朋友们的真诚交流. miao ...

  6. Java WebService简单使用

    一直在写java但从来没有使用webservice,在网上查了下资料写个简单的使用放这里做备份 具体步骤: 1.新建一个java工程在里面写一个类(服务端)如下: package com.webser ...

  7. bzoj 3197 [Sdoi2013]assassin（Hash+DP+KM）

    Description Input Output Sample Input 4 1 2 2 3 3 4 0 0 1 1 1 0 0 0 Sample Output 1 HINT [思路] Hash,D ...

  8. 【暑假】[深入动态规划]UVa 1412 Fund Management

    UVa 1412 Fund Management 题目: UVA - 1412 Fund Management Time Limit: 3000MS   Memory Limit: Unknown   ...

  9. VIJOS-P1340 拯救ice-cream（广搜+优先级队列）

    题意:从s到m的最短时间.(“o"不能走,‘#’走一个花两个单位时间,‘.'走一个花一个单位时间) 思路:广搜和优先队列. #include <stdio.h> #include ...

  10. js学习记录

    1.js语法 2.数据类型(基本类型与对象类型.类型的转换) 2.1 数字 2.2 文本 2.3 布尔值 2.4 null和undefined 2.5 对象 2.6 类型检测 3.操作符和表达式 4. ...