<!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <title>表单提交</title>

   <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

 </head>

 <body>

 <!--文件上传-->

 <form id="uploadForm" enctype="multipart/form-data">

   <div id="fileId" style='display: none'><!--//style='display: none'-->

   </div>

   <div id="img-con" class="panel panel-default imgdiv">

   </div>

   <p id="em">未上传文件</p>

   <input type="button" value="点击事件" name="点击事件" onclick="inputClieck()"><br>

   <input type="submit">

 </form>

 </body>

 <script>

   var inputArray = [];

   function inputClieck() {

     var newInput = document.createElement("input");

     newInput.type = 'file';

     newInput.name = "files";

     var idid = new Date().getTime();

     newInput.id = idid;

     $("#fileId").append(newInput);

     inputArray.push(idid);

     $("#" + idid).click();

     $("#" + idid).change(function (e) {

       console.log('change事件', e);

       console.log(this)

       var path= getImgPath(this.files[0]);

       console.log("--------"+path);

       var arr = path.split("/");

       var strPath='--------:null/'+arr[arr.length-1];

       console.log(strPath)

       var a=createImg(path,idid);

       $("#em").append(a)

     });

     var newline = document.createElement("br");//创建一个BR标签是为能够换行！

     $("#fileId").append(newline);

   }

   //动态显示上传图片

   function uploadImg(path) {

     var imgDiv = $("#img-con");

     var $img = $("<img/>");

     $img.attr("src", path);

     imgDiv.append($img);

   }

   //获取要上传单张图片的本地路径

   function getImgPath(file) {

     var url = null;

     if(window.createObjectURL != undefined) { // basic

       url = window.createObjectURL(file);

     } else if(window.URL != undefined) { // mozilla(firefox)

       url = window.URL.createObjectURL(file);

     } else if(window.webkitURL != undefined) { // webkit or chrome

       url = window.webkitURL.createObjectURL(file);

     }

     return url;

   }

   function createImg(src,idid) {

     var box = $("<div class='img-box uploadfile'>");

     var newImg = document.createElement("img");

     newImg.src=src;

     newImg.id="img"+idid;

     newImg.height=100;

     newImg.width=100;

     newImg.onclick='showImagePopup(\"" + src + "\")';

     //box.append("<img src='" + src + "' height='100px' width='100px' onclick='showImagePopup(\"" + src + "\")'>");

     box.append(newImg);

     return box;

   }

   function showImagePopup(src) {

     if (getClass(src) === "String") {

       var popup = $("<img></img");

       popup.addClass("image-popup").attr("src", src);

       var shade = $("<div></div>").addClass("shade");

       $(document.body).append(shade.append(popup));

       shade.click(function () {

         $(this).remove();

       });

       popup.fadeIn(200);

       // popup.click(function() {

       // window.event ? window.event.cancelBubble = true :

       // window.event.stopPropagation();

       // });

     }

   }

 </script>

 </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. Fedora 21 安装 Budgie Desktop

    最新文章:Virson's Blog Budgie Desktop 是一款自由开源桌面,是 Evolve OS 的默认桌面,Evolve OS 是一款 OpenSUSE 的衍生系统.Budgie De ...

  2. Mysql系列七：分库分表技术难题之分布式全局唯一id解决方案

    一.前言 在前面的文章Mysql系列四:数据库分库分表基础理论中,已经说过分库分表需要应对的技术难题有如下几个: 1. 分布式全局唯一id 2. 分片规则和策略 3. 跨分片技术问题 4. 跨分片事物 ...

  3. CentOS命令介绍综合

    1,显示当前使用的shell [root@localhost ~]# echo $SHELL2,显示当前系统使用的所有shell [root@localhost ~]# cat /etc/shells ...

  4. Socket 相关资料（随笔）

    由于项目上的 http 请求量较大,项目上性能跟不上.于是考虑把 短连接的 http 换成 长连接的tcp 形式 试试效果. 先 研究了一下 长连接方式.就是要用到 socket 方面的知识. pac ...

  5. 年关将至业内警示P2P跑路风险

    年关将近,P2P网贷行业的问题平台亦不断增多,“跑路潮”会否再现,业内人士讨论热烈. “从历年数据统计来看,问题平台接近线性向上的增长趋势,即时间越往后,问题平台占比就越高,而每逢年关,问题平台占比都 ...

  6. [Bayes] Multinomials and Dirichlet distribution

    From: https://www.cs.cmu.edu/~scohen/psnlp-lecture6.pdf 不错的PPT,图示很好. 伯努利分布 和 多项式分布 Binomial Distribu ...

  7. jmeter之结果重定向

    在使用jmeter与jenkins对接时,发现默认打印出来的日志就是正常的summary统计,如果要查看日志,只能通过jmeter.log去查看. 来来来,我们一起温习下jmeter的命令行参数 -- ...

  8. css---颜色过渡渐变

    CSS---颜色过渡渐变 <!doctype html> <html lang="en"> <head> <meta charset=&q ...

  9. ABP之事件总线(4)

    在上一篇的随笔中,我们已经初步完成了EventBus,但是EventBus中还有诸多的问题存在,那么到底有什么问题呢,接下来我们需要看一看ABP中的源码是如何定义EventBus的. 1.第一个点 在 ...

  10. MySQL数据库一个字段对应多个值得模糊查询和多个字段对应一个模糊查询

    当一个字段想模糊查询出多个字段的时候,正常情况下一般会这么作 1 select * from a where name like 'a%' or name like 'b%' ....or ...; ...