<!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. Git -- 忽略特殊文件

    有些时候,你必须把某些文件放到Git工作目录中,但又不能提交它们,比如保存了数据库密码的配置文件啦,等等,每次git status都会显示Untracked files ...,有强迫症的童鞋心里肯定 ...

  2. 最全面的Spring-Boot-Cache使用与整合

    一:Spring缓存抽象 Spring从3.1开始定义了org.springframework.cache.Cache和org.springframework.cache.CacheManager接口 ...

  3. Java8学习笔记（十）--自定义收集器

    前言 以前写过Java8中的自定义收集器,当时只是在文章末尾放了个例子,觉得基本用法挺简单,而且有些东西没搞懂(比如combiner方法到底做什么的),没有专门写,过了一段时间又忘了,所以,即使还是没 ...

  4. jenkins 启动slave时，找不到合适的java程序

    今天添加slave 又不成功,我用右键,发现随意点了java的那个打开,结果刚弹出来就关闭了窗口,显示未启动成功. 真是小白的想法,不过跟工具打交道久了,多少逻辑上想一下不对. 一定是用了不合适的程序 ...

  5. 【QT】对话框打开图像并用QPixmap显示

    绘图设备是指继承QPaintDevice的子类,可以使用QPainter直接在其上面绘制图形,Qt一共提供了四个这样继承QPaintDevice的绘图设备类. 分别是QPixmap.QBitmap.Q ...

  6. electron安装+运行+打包成桌面应用+打包成安装文件+开机自启动

    1.初始化node项目,生成package.json文件 npm init 2.安装electron,并保存为开发依赖项 npm install electron -D 3.根目录下新建index.j ...

  7. [UI] 05 - Bootstrap: built-in components

    前言 一.资源 From: http://www.imooc.com/code/3777 内置组件 一.缩略图 <div class="col-xs-6 col-md-3"& ...

  8. Caused by: java.lang.ClassNotFoundException: javax.xml.bind.Validation

    Caused by: java.lang.ClassNotFoundException: javax.xml.bind.Validation JAXB API是java EE 的API,因此在java ...

  9. 面向对象。OOP三大特征：封装，继承，多态。 这个讲的是【封存】

    class Ren { private $name; private $sex; private $age; //年龄必须在18-50之间 function __constuct($v) { $thi ...

  10. （广度搜索）A - Prime Path（11.1.1）

    A - Prime Path(11.1.1) Time Limit:1000MS    Memory Limit:65536KB    64bit IO Format:%I64d & %I64 ...