<!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. C# 中类和结构的区别

    转角撞倒猪原文C# 中类和结构的区别

  2. ASDL + WN725N 配置无线AP

    1.  ASDL 正常拨号上网 2.  安装TP-LINK无线客户端应用程序 打开之后选择模拟AP 如下图设置----应用 3.  本地连接----属性----高级 如下图设置 4.  宽带连接--- ...

  3. Clone PDB from same CDB

    Clone PDB 用途: 1.用于测试,从生产系统clone数据来进行测试 2.诊断性能问题   Clone PDB Using OMF from same CDB 环境信息: DB Version ...

  4. 设计模式_Composite_合成模式

    形象例子: Mary今天过生日.“我过生日,你要送我一件礼物.”“嗯,好吧,去 商店,你自己挑.”“这件T恤挺漂亮,买,这条裙子好看,买,这个包也不错,买.”“喂,买了三件了呀,我只答应送一件礼物的哦 ...

  5. Js 与 TextArea

    当给一个js变量赋值一个有换行的值得时候,就会报错: <!DOCTYPE HTML> <html> <head> <script src="http ...

  6. 使用 cloc 统计代码行数

    可能大家都知道用 `wc -l` 命令进行代码行数统计,但是它会将代码中的注释.空行所占用的文本行都统计在内.如果想查看一个 tar 包或一个项目目录中“实际”的代码行数并且不愿意自己去写一个脚本来做 ...

  7. Linux与Windows的8个不同

    (整理来自网络) 对刚刚接触Linux的人来说,很容易从windows的观念去理解Linux系统.今天扒一扒Win和Linux之间常见的8个区别. 一.Linux终端输入密码不回显字符 用户的密码在L ...

  8. bzoj 3551 [ONTAK2010]Peaks加强版（kruskal，主席树，dfs序）

    Description [题目描述]同3545 Input 第一行三个数N,M,Q. 第二行N个数,第i个数为h_i 接下来M行,每行3个数a b c,表示从a到b有一条困难值为c的双向路径. 接下来 ...

  9. 【poj2891】Strange Way to Express Integers

    题意: 给出n个模方程x=a(mod r) 求x的最小解 题解: 这就是个线性模方程组的模版题- - 但是有一些要注意的地方 extgcd算出来的解x可能负数  要让x=(x%mo+mo)%mo 而且 ...

  10. ClassLoader, JavaAgent, Aspectj Weaving一站式扫盲帖

    最近工作里复习的Class Loader基础知识集锦,写下来希望对别人有帮助,而且不止是为了撂倒面试官. 为了尽量简单明了容易背,有些部分写得比较干. 0. 参考资料: 书:<深入了解Java虚 ...