1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.    <meta charset="UTF-8">
  5.    <title>表单提交</title>
  6.    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  7.  </head>
  8.  <body>
  9.  
  10.  <!--文件上传-->
  11.  <form id="uploadForm" enctype="multipart/form-data">
  12.    <div id="fileId" style='display: none'><!--//style='display: none'-->
  13.  
  14.    </div>
  15.    <div id="img-con" class="panel panel-default imgdiv">
  16.  
  17.    </div>
  18.    <p id="em">未上传文件</p>
  19.    <input type="button" value="点击事件" name="点击事件" onclick="inputClieck()"><br>
  20.    <input type="submit">
  21.  </form>
  22.  </body>
  23.  <script>
  24.  
  25.    var inputArray = [];
  26.  
  27.    function inputClieck() {
  28.      var newInput = document.createElement("input");
  29.      newInput.type = 'file';
  30.      newInput.name = "files";
  31.      var idid = new Date().getTime();
  32.      newInput.id = idid;
  33.      $("#fileId").append(newInput);
  34.      inputArray.push(idid);
  35.  
  36.      $("#" + idid).click();
  37.  
  38.      $("#" + idid).change(function (e) {
  39.        console.log('change事件', e);
  40.        console.log(this)
  41.        var path= getImgPath(this.files[0]);
  42.        console.log("--------"+path);
  43.  
  44.        var arr = path.split("/");
  45.        var strPath='--------:null/'+arr[arr.length-1];
  46.        console.log(strPath)
  47.        var a=createImg(path,idid);
  48.        $("#em").append(a)
  49.  
  50.      });
  51.      var newline = document.createElement("br");//创建一个BR标签是为能够换行！
  52.      $("#fileId").append(newline);
  53.    }
  54.  
  55.    //动态显示上传图片
  56.    function uploadImg(path) {
  57.      var imgDiv = $("#img-con");
  58.      var $img = $("<img/>");
  59.      $img.attr("src", path);
  60.      imgDiv.append($img);
  61.    }
  62.  
  63.    //获取要上传单张图片的本地路径
  64.    function getImgPath(file) {
  65.  
  66.      var url = null;
  67.      if(window.createObjectURL != undefined) { // basic
  68.        url = window.createObjectURL(file);
  69.      } else if(window.URL != undefined) { // mozilla(firefox)
  70.        url = window.URL.createObjectURL(file);
  71.      } else if(window.webkitURL != undefined) { // webkit or chrome
  72.        url = window.webkitURL.createObjectURL(file);
  73.      }
  74.      return url;
  75.    }
  76.  
  77.    function createImg(src,idid) {
  78.      var box = $("<div class='img-box uploadfile'>");
  79.  
  80.      var newImg = document.createElement("img");
  81.      newImg.src=src;
  82.      newImg.id="img"+idid;
  83.      newImg.height=100;
  84.      newImg.width=100;
  85.      newImg.onclick='showImagePopup(\"" + src + "\")';
  86.  
  87.      //box.append("<img src='" + src + "' height='100px' width='100px' onclick='showImagePopup(\"" + src + "\")'>");
  88.      box.append(newImg);
  89.      return box;
  90.    }
  91.  
  92.    function showImagePopup(src) {
  93.      if (getClass(src) === "String") {
  94.        var popup = $("<img></img");
  95.        popup.addClass("image-popup").attr("src", src);
  96.        var shade = $("<div></div>").addClass("shade");
  97.        $(document.body).append(shade.append(popup));
  98.        shade.click(function () {
  99.          $(this).remove();
  100.        });
  101.        popup.fadeIn(200);
  102.        // popup.click(function() {
  103.        // window.event ? window.event.cancelBubble = true :
  104.        // window.event.stopPropagation();
  105.        // });
  106.      }
  107.    }
  108.  
  109.  </script>
  110.  </html>

html多文件上传，可支持预览的更多相关文章

  1. dwz+jquery+fileupload+springmvc实现文件上传 及图片预览

    1 前台jsp:文件的上传利用了iframe实现局部刷新功能.使用了apache的fileupload组件,用到的jar: commons-fileupload.jar,commons-io.jarD ...

  2. php文件上传及头像预览

    php文件上传原理是通过form表单的enctype="multipart/form-data"属性将文件临时放到wamp文件夹中的tmp目录下,再通过后台php 程序将文件保存在 ...

  3. HTML5文件上传前本地预览

    HTML5之FileReader的使用 HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型 ...

  4. javascript实现文件上传之前的预览功能

    1.首先要给上传文件表单控件和图片控件设置name属性 <div class="form-group">                    <label fo ...

  5. jsp+springmvc实现文件上传、图片上传和及时预览图片

    1.多文件上传:http://blog.csdn.net/a1314517love/article/details/24183273 2.单文件上传的简单示例:http://blog.csdn.net ...

  6. Ajax上传图片以及上传之前先预览

    手头上有几个小项目用到了easyUI,一开始决定使用easyUI就注定了项目整体上前后端分离,基本上所有的请求都采用Ajax来完成.在文件上传的时候用到了Ajax上传文件,以及图片在上传之前的预览效果 ...

  7. java多图片上传--前端实现预览--图片压缩 、图片缩放，区域裁剪，水印，旋转，保持比例。

    java多图片上传--前端实现预览 前端代码: https://pan.baidu.com/s/1cqKbmjBSXOhFX4HR1XGkyQ 解压后: java后台: <!--文件上传--&g ...

  8. web 图片上传实现本地预览

    在说上传之前先说说如何替换or美化浏览器自带的简陋上传按钮(自定义自己的上传按钮 如:img): 1.将自定义上传按钮上方添加 input file 框,实现input实现透明处理. 2.对自定义上传 ...

  9. [.ashx檔？泛型处理例程？]基础入门#2....FileUpload上传前，预览图片（两种作法--ashx与JavaScript）

    原文出處  http://www.dotblogs.com.tw/mis2000lab/archive/2013/08/20/ashx_beginner_02_fileupload_picture_p ...

  10. 聊一聊jquery文件上传（支持多文件上传）

    谈到文件上传,现在一般都用现成的组件可以使用.PC端的可以使用uploadify.针对微网站H5也有uploadifive.但是这组件并不能满足各种场景的需求,例如:预览 切图 放大缩小,取消之类的. ...

随机推荐

  1. Java知多少（82）标签、按钮和按钮事件简介

    标签和按钮也许是图形界面中最常见的两种组件,按钮又总是与激发动作事件有关. 标签 标签(JLabel)是最简单的Swing组件.标签对象的作用是对位于其后的界面组件作说明.可以设置标签的属性,即前景色 ...

  2. Qt动态库静态库的创建、使用、多级库依赖、动态库改成静态库等详细说明

    本文描述的是windows系统下,通过qtcreator在pro文件中添加动态库与静态库的方法: 1.添加动态库(直接添加动态库文件.dll,非子项目) 通过qtcreator创建动态库的方法就不在此 ...

  3. laravel数据库配置

    1.说明,查看laravel数据库配置 项目名/config/database.php     'default' => env('DB_CONNECTION', 'mysql') 2.数据开发 ...

  4. Linux监控平台介绍 zabbix监控介绍 安装zabbix 忘记Admin密码如何做

  5. yum 快速安装centos7 mysql5.7

    CentOS7 yum方式安装MySQL5.7   在CentOS中默认安装有MariaDB,这个是MySQL的分支,但为了需要,还是要在系统中安装MySQL,而且安装完成之后可以直接覆盖掉Maria ...

  6. 08策略模式Strategy

    一.什么是策略模式 Strategy模式也叫策略模式是行为模式之一, 它对一系列的算法加以封装,为所有算法定义一 个抽象的算法接口,并通过继承该抽象算法接口 对所有的算法加以封装和实现,具体的算法选择 ...

  7. Docker - Docker中搭建MySQL主从

    1.pull完centos7纯净版的镜像后,创建容器,然后将宿主机上下载的MySQL文件 (MySQL下载地址:http://mysql.mirror.kangaroot.net/Downloads/ ...

  8. WebKit最新特性srcset简介(转)

    WebKit内核最新新增了对srcset属性的支持(参考:https://www.webkit.org/blog/2910/improved-support-for-high-resolution-d ...

  9. Android 监听键盘弹出和收起.

    entends:http://stackoverflow.com/questions/36837066/how-to-validate-virtual-keyboard-visibility 监听键盘 ...

  10. zynq里面的AXI总线（2017-1-11）

    在ZYNQ中有支持三种AXI总线,拥有三种AXI接口,当然用的都是AXI协议.其中三种AXI总线分别为: AXI4:(For high-performance memory-mapped requir ...