<!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. WPF Input Validation Using MVVM

    Data validation is a key part in WPF.Validation is used to alert the user that the data he entered i ...

  2. 第四百节，Django+Xadmin打造上线标准的在线教育平台—生产环境部署CentOS6.5安装python3.5.1

    第四百节,Django+Xadmin打造上线标准的在线教育平台—生产环境部署CentOS6.5安装python3.5.1 1.检查系统是否安装了python [root@192 ~]# rpm -qa ...

  3. 第三百九十三节，Django+Xadmin打造上线标准的在线教育平台—Xadmin后台进阶开发配置

    第三百九十三节,Django+Xadmin打造上线标准的在线教育平台—Xadmin后台进阶开发配置 设置后台某个字段的排序规则 在当前APP里的adminx.py文件里的数据表管理器里设置 order ...

  4. [React] 10 - Tutorial: router

    Ref: REACT JS TUTORIAL #6 - React Router & Intro to Single Page Apps with React JS Ref: REACT JS ...

  5. bootstrap入门基础

    1.字体 text-left text-center text-right text-lowercase 小写 text-uppercase 大写 text-capitalize 首字母大写 2.表格 ...

  6. No suitable servers found (`serverselectiontryonce` set): [Failed connecting to '115.28.161.44:27017': Connection timed out] php mongodb 异常

    我 php mongodb 拓展使用的是  MongoDB driver 今天查询数据的时候 偶尔会提示, No suitable servers found (`serverselectiontry ...

  7. Python实现C代码统计工具(一)

    目录 Python实现C代码统计工具(一) 声明 一. 问题提出 二. 代码实现 三. 效果验证 四. 后记 Python实现C代码统计工具(一) 标签: Python 代码统计 声明 本文将基于Py ...

  8. HTTP 响应状态码

    MDN https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Status section 10 of RFC 2616 https://tools.ie ...

  9. Web（二）

    一.数据的传递--转发和重定向 1.创建一个login.jsp页面  <body>     <%-- action:我们需要提交的地址  method:请求的方式 --%>   ...

  10. Centos下磁盘管理---分区

        1.磁盘分区格式说明 linux分区不同于windows,linux下硬盘设备名为(IDE硬盘为hdx(x为从a—d)因为IDE硬盘最多四个,SCSI,SATA,USB硬盘为sdx(x为a—z ...