<!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. 将java应用程序打包成可执行文件

    准备工作:我用的打包软件是installanywhere.因此要先下载这个软件,这里提供一个下载地址http://www.52z.com/soft/21747.html.(网页上写的有破解方法) 详细 ...

  2. C# 中类和结构的区别

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

  3. bzoj 3198 [Sdoi2013]spring（容斥原理+Hash）

    Description Input Output Sample Input 3 3 1 2 3 4 5 6 1 2 3 0 0 0 0 0 0 4 5 6 Sample Output 2 HINT [ ...

  4. POJ 2955 Brackets 区间合并

    输出一个串里面能匹配的括号数 状态转移方程: if(s[i]=='('&&s[j]==')'||s[i]=='['&&s[j]==']')             dp ...

  5. 50道经典的JAVA编程题(36-40)

    50道经典的JAVA编程题(36-40),今天晚上心情压抑,不爽,继续做题,管它明天考试,我继续我的java,一个周末都在看微机原理看得的很头疼啊~明天该挂科就挂吧,不在乎了~~~ [程序36] Ar ...

  6. HW5.36

    import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...

  7. Anipang2反推文档

    此文档主要用于一个开发同学尝试学习描述一个产品的基本设计.也许工程师都应该有类似能力. 反推的基础,目前是自己玩过的一些关卡和youtube上的一些关卡通关视频,主要是前120关.(120关后面应该是 ...

  8. 获取最外层View

    获取最外层View activity.getWindow().getDecorView()

  9. 关于PCB布线的顺序到底是怎样才合理？

    有人说先布好电源线和地线,让它们尽量靠近走,然后再考虑信号线:也有人说先布好关键的信号线,然后再走电源和地线:还有人说先布好电源线,再布信号线,地线最后布.到底怎么样才算好呢?或者说,一般应按照什么顺 ...

  10. MongoDB介绍及下载与安装

    MongoDB是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的.他支持的数据结构非常松散,是类似json的bjson格式,因此可以存储比较复杂的数据类型.M ...