html多文件上传,可支持预览

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

原文地址:https://www.cnblogs.com/limn/p/10793686.html

时间: 2024-11-06 05:47:41

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

文件上传之图片预览

一.业界现状分析 有时候我们需要在上传图片之前为用户提供图片预览的功能,HTML5规范出来之前,由于缺少原生的File API支持,我们需要借助Flash或者浏览器插件来满足这种需求.有了HTML5,我们可使用URL或者FileReader对象实现预览功能. 二.应用场景 图片分享类的应用,如Flickr,Facebook.相册应用,如:QQ相册. 虽然139邮箱没有合适的应用场景,但是可将技术预研的成果作为技术储备,好东西总有用得着的时候. 三.编码实现 方式一:window.URL (1).

2016/4/19 ①单个文件上传 ②上传图片后 预览图片

1,f1.php <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- 作业:在网上找上传图片预览的代码 上传服务器 再预览--> <form action="f1chuli.php&q

input 文件上传实现本地预览

上传图片 本地预览 获取图片大小 上传视频 本地预览 获取视频 duration 视频大小 图片上传 主要涉及内容 input accept filesList URL.createObjectURL() URL.revokeObjectURL() input file <label for='upload'></label> // ::before :: after 用于扩展可点击区域 <input type="file" id="upload

文件上传(无预览模式版)

文件上传是网页的基本功能之一,这一章我们将讲解无预览模式版本 第一:网页表单显示 <body> <h1>文件上传</h1> <form action="chuli.php" method="post" enctype="multipart/form-data"> <input type="file" name="file"/> <input

文件上传(带有预览模式)

这里所讲的预览是将文件上传至后台之后,代码调用服务器端文件,在网页中显示出来 第一:网页显示部分 和  显示区域css样式表 <body> <h1>文件上传</h1> <form action="chuli.php" method="post" enctype="multipart/form-data" id="sc" target="hidden_frame"&g

用openoffice+jodconverter+webuploader+pdf.js实现文件上传、在线预览功能

一.背景 最近公司一个项目要实现一个文件上传以及多文档在线预览的功能,之前一直做无线工具开发的,没有涉及到这些东西.另外项目组缺java开发人员,而且自己也只是一个半吊子前端加小半吊子java开发人员,所以让我一个人先弄个Demo出来瞧瞧.在网上搜索了不少资料,在这里只是整理一下,留作以后查阅. 二.插件以及工具包 1.pdfjs-v1.7.225  前端pdf格式文件的显示组件 2.webuploader-0.1.5  百度的文件上传组件 3.video-js-6.2.5 html5视频播放组

input实现多文件上传及图片预览

通过使用html的input标签可以实现文件上传比如 <input id="file" type="file" name="upload" multiple onchange="showch();"> 其中将type属性设为file. 添加multiple实现多文件上传入下图所示: 通过使用原生js或jQuery就可以获得文件名,文件路径,文件大小等属性 获得文件属性的js代码如下: <script type

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

1 前台jsp:文件的上传利用了iframe实现局部刷新功能.使用了apache的fileupload组件,用到的jar: commons-fileupload.jar,commons-io.jarDiskFileItemFactory fac = new DiskFileItemFactory();ServletFileUpload upload = new ServletFileUpload(fac);upload.setHeaderEncoding("utf-8"); Html代

php文件上传及头像预览

php文件上传原理是通过form表单的enctype="multipart/form-data"属性将文件临时放到wamp文件夹中的tmp目录下,再通过后台php 程序将文件保存在体统中. html代码: 1 <form action="shangchuan.php" method="post" enctype="multipart/form-data"> 2 <input type="file&q

WebForm实现文件上传,并预览

实现效果: 页面代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=&quo