<!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. 使用BusyBox制作Linux根文件系统

    STEP 1:构建目录结构 创建根文件系统目录,主要包括以下目录/dev  /etc /lib  /usr  /var /proc /tmp /home /root /mnt /bin  /sbin  ...

  2. Oracle数据库安装后，登录Database Control时密码错误

    解决方案1(实测可行): sys 和 system用户的用户名和密码还记得不?试试看如果不行,用sqlplus 在服务器本地登录%sqlplus / as sysdbaSQL>alter use ...

  3. 33、多线程断点下载的实现&界面的更新

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...

  4. 发送复杂的HTTP GET请求并且取回响应。

    设计思想: 创建一个HttpWebRequest类的实例,并通过GetReponse()方法取回响应的HTTP响应. 实例方案: string url="http://www.baidu.c ...

  5. 利用weka和clementine数据挖掘举例

    1.数据概述 本报告中采用的数据集来自于UCI经典数据集Adult,最初来源是由1994年Barry Becker的统计数据集,该数据集本来最初的主要任务是根据数据集中的相关属性预测某个人的年收入是大 ...

  6. sql-定义变量

    declare @subject nvarchar(50) set @subject=(select Subject from dbo.Scores where ID=1) --select @sub ...

  7. BNUOJ-29358 Come to a spring outing 搜索,DP

    题目链接:http://www.bnuoj.com/bnuoj/problem_show.php?pid=29358 状态虽然很多,但是非常稀疏,dfs搜索然后剪下枝.. 或者DP,f[i][j][k ...

  8. 安装Python

    因为Python是跨平台的,它可以运行在Windows.Mac和各种Linux/Unix系统上.在Windows上写Python程序,放到Linux上也是能够运行的. 要开始学习Python编程,首先 ...

  9. DNS服务未响应的简单解决办法

    今天晚上下班回家,打开电脑,发现打不开网页了,同一个wifi环境下,我的手机是可以连接上的,网上搜了一大推,又是重启服务,又是重新填写dns服务地址,都不管用, 该怎么办呢??. 其实发现很简单,打开 ...

  10. SpringMVC学习 DispatcherServlet (转载)

    3.1.DispatcherServlet作用 DispatcherServlet是前端控制器设计模式的实现,提供spring Web MVC的集中访问点,而且负责职责的分派,而且与Spring Io ...