1.  <!DOCTYPE html>
  2.  <html>
  3.  <head lang="en">
  4.      <meta charset="UTF-8">
  5.      <title></title>
  6.      <style>
  7.          #div{
  8.              width: 200px;
  9.              height: 200px;
  10.              background: red;
  11.              margin: 100px;
  12.          }
  13.      </style>
  14.      <script>
  15.          /* dataTransfer对象：
  16.          1.files:获取外部拖拽的文件，返回一个filesList列表，是对象集合，自然有length属性；
  17.          2.filesList下有个type属性，返回文件的类型；
  18.          3.fileReader:读取文件信息
  19.              ①readAsDataURL(argument):参数为读取的文件对象，将文件读取为DataUrl；
  20.              ②onload:当文件读取成功时触发此事件；
  21.              ③this.result:获取读取的文件数据，如果是图片，将返回base64格式的图片数据；
  22.          */
  23.          onload= function () {
  24.              var oDiv=document.getElementById('div');
  25.              var oUl=document.getElementById('ul');
  26.              oDiv.ondragenter= function () {
  27.                  this.innerHTML='现在可以释放文件了';
  28.              }
  29.              oDiv.ondragover= function (ev) {
  30.                  ev=ev||event;
  31.                  ev.preventDefault();
  32.              }
  33.              oDiv.ondragleave= function () {
  34.                  this.innerHTML='将文件拖放到此区域';
  35.              }
  36.              oDiv.ondrop= function (ev) {
  37.                  ev=ev||event;
  38.                  ev.preventDefault();        //浏览器的默认行为是：将图片文件拖放到此处会在浏览器中打开图片
  39.  
  40.                  var fs=ev.dataTransfer.files;
  41.                  //console.log(fs.length);
  42.                  //console.log(fs[0].type);
  43.                  for(var i= 0,len=fs.length;i<len;i++){
  44.                      /* indexOf(searchvalue,formindex):返回某个指定的字符串值在字符串中首次出现的位置。
  45.                       1.searchvalue:规定需检索的字符串类型；
  46.                        formindex：可选的整数参数，规定在字符串中需检索的位置，它的合法取值是0-stringObject.length-1,如果省略此参数，则将从字符串的首字符开始检索；
  47.                      2.该方法将从头到尾地检索字符串 stringObject，看它是否含有子串 searchvalue。开始检索的位置在字符串的 fromindex 处或字符串的开头（没有指定 fromindex 时）。
  48.                        如果找到一个 searchvalue，则返回 searchvalue 的第一次出现的位置。stringObject 中的字符位置是从 0 开始的。
  49.                      3.indexOf()对大小写敏感；
  50.                      4.如果要检索的字符串没有出现，则返回-1；
  51.                       */
  52.                      if(fs[i].type.indexOf('image')!==-1){
  53.                          var fd = new FileReader();
  54.                          fd.readAsDataURL(fs[i]);
  55.                          fd.onload= function () {
  56.                              //console.log(this.result);
  57.                              var oLi=document.createElement('li');
  58.                              var oImg=document.createElement('img');
  59.                              oImg.src=this.result;
  60.                              oUl.appendChild(oLi);
  61.                              oLi.appendChild(oImg);
  62.                          }
  63.                      }else{
  64.                          alert('亲，请上传图片！');
  65.                      }
  66.                  }
  67.  
  68.              }
  69.          }
  70.      </script>
  71.  </head>
  72.  <body>
  73.      <div id="div">将文件拖放到此区域</div>
  74.      <ul id="ul"></ul>
  75.  
  76.  </body>
  77.  </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. uboot里读sd卡内容

    1. sd卡升级命令 mmcinit 0 fatload mmc 0:1 0 uzImage.bin 80000 fatload mmc 0:1 1000000 initrd.gz 580000 bo ...

  2. This Android SDK requires Android Developer Toolkit version 23.0.0 or above

    2014-07-05 12:58 6445人阅读 评论(1) 收藏 举报 This Android SDK requires Android Developer Toolkit version 23. ...

  3. win7（64位）+IE8+QC9.0

    环境win7(64位)+IE8+QC9.0出现的问题IE8访问QC9.0有时访问登录显示正常,但是有时访问QC页面无法显示正常,然后在ie8中安全中设置“启用内存保护帮助减少联机攻击*”也无法找到该项 ...

  4. 在 MacOS 上编译链接 OpenGL 程序

    几个星期以前开始折腾在我的MBA上写 OpenGL 小程序.我不太熟悉MacOS上的开发工具比如XCode,所以一开始的想法就是用vim来写程序,然后手工编译链接.网上查了一下,MacOS上的Open ...

  5. NOIP2005 过河

    过河 (river.pas/c/cpp) [问题描述] 在河上有一座独木桥,一只青蛙想沿着独木桥从河的一侧跳到另一侧.在桥上有一些石子,青蛙很讨厌踩在这些石子上.由于桥的长度和青蛙一次跳过的距离都是正 ...

  6. javascript设计模式8

    桥接模式(将抽象与其实现隔离开来,以便二者独立变化) function sendInfo(element){ var id=element.id; ajax("GET"," ...

  7. 命令cp

    cp 源 目标cp -r  递归复制整个目录cp -v  显示复制的详细信息

  8. 取得Resultset的记录条数

    public Boolean exists(String sql) { try { stm = conn.createStatement( java.sql.ResultSet.TYPE_SCROLL ...

  9. android NDK 实用学习（二）-java端对象成员赋值和获取对象成员值

    1,关于java端类及接口定义请参考: android NDK 实用学习-获取java端类及其类变量 2,对传过来的参数进行赋值: 对bool类型成员进行赋值  env->SetBooleanF ...

  10. 图解Java字符串不变性

    1. 声明字符串 String s = "abcd"; 这里,s存储了“abcd”在这个字符串对象的引用,如下图所示: 2. 将字符串变量s赋值给字符串变量s2 String s2 ...