<!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. 大数据基础篇----jvm的知识点归纳-5个区和垃圾回收机制

    一直对jvm看了又忘,忘了又看的.今天做一个笔记整理存放在这里. 我们先看一下JVM的内存模型图: 上面有5个区,这5个区干嘛用的呢? 我们想象一个场景: 我们有一个class文件,里面有很多的类的定 ...

  2. net/http: request canceled while waiting for connection (Client.Timeout exceeded while awaiting head

    使用docker 拉镜像的时候,出现下面的错误: net/http: request canceled while waiting for connection (Client.Timeout exc ...

  3. CentOS服务器ntpdate同步

    如有多台CentOS服务器运行相同的服务,且对时间准确性要求较高,那必须保证多台服务器时间统一. 最简单的就是每台服务器都用ntpdate同步同一台网络时间服务器的时间. 1.输入ntpdate ti ...

  4. Java8学习笔记（二）--三个预定义函数接口

    三个函数接口概述 JDK预定义了很多函数接口以避免用户重复定义.最典型的是Function: @FunctionalInterface public interface Function<T, ...

  5. ABBYY FineReader Pro for Mac有哪些特性（上）

    使用ABBYY FineReader Pro for Mac轻松转换纸质文档.PDF文件和数字文本照片为可编辑和可搜索的文件,再也不需要手动重新输入或格式化了,相反,可以编辑.搜索.共享.归档和复制文 ...

  6. Linux/Centos下使用mtr做路由图进行网络分析

    工具作用: mtr可以做路由图供我们分析哪里出现故障或者是否存在有网络拥塞的情况 1. 首先安装mtr 工具 使用yum  安装 :  yum  install mtr -y  2. 使用 我经常在工 ...

  7. webpack + vue 项目 自定义 插件 解决 前端 JS 版本 更新 问题

    Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 它的异步加载原理是,事先将编译好后的静态文件,通过js对象映射,硬编 ...

  8. js for in 获得遍历数组索引和对象属性

    for in 遍历对象属性 获取的是对象的属性名 var person ={ name:"admin", age:"21", address:"sha ...

  9. [原]Jenkins(七)---jenkins项目编译测试发布由maven构建的web项目

    /** * lihaibo * 文章内容都是根据自己工作情况实践得出. * 版权声明:本博客欢迎转发,但请保留原作者信息! http://www.cnblogs.com/horizonli/p/533 ...

  10. sonar-scanner的执行流程和对ClassLoader,动态代理的使用

    最近项目上使用了sonarqube来提供静态代码检查的服务,在看sonar-scanner的源码的时候,发现sonar-scanner用来分析的jar包是从sonar的服务器上下载下来的,使用自定义的 ...