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>
