LayUi:实现多图片上传预览

需求：实现上传图片时，现在页面上预览缓存，可删除，可点击放大查看，可上传多张图片，点击上传时才上传图片。
效果图：
代码：
  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="utf-8">
  5     <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  6     <title>上传多图片页面</title>
  7     <link rel="stylesheet" href="../layui/css/layui.css">
  8     <style>
  9         *{ margin: 0; padding: 0;}
 10         #formdata{max-width: 852px; margin:0 auto}
 11 
 12         .btn { border-radius: 0px; font-weight: 100; cursor: pointer; display: inline-block; padding: 5px; font-size: 14px;
 13             font-family: '微软雅黑' }
 14 
 15         .btn-primary { color: #fff; text-shadow: 0 1px rgba(0, 0, 0, .1);
 16             background-image: -webkit-linear-gradient(top, #4d90fe 0, #4787ed 100%);
 17             background-image: -o-linear-gradient(top, #4d90fe 0, #4787ed 100%);
 18             background-image: -webkit-gradient(linear, left top, left bottom, from(#4d90fe), to(#4787ed));
 19             background-image: linear-gradient(to bottom, #4d90fe 0, #4787ed 100%);
 20             filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff4d90fe', endColorstr='#ff4787ed', GradientType=0);
 21             filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
 22             background-repeat: repeat-x;
 23             border: 1px solid #3079ed;
 24         }
 25 
 26         .btn-success { color: #fff; text-shadow: 0 1px rgba(0, 0, 0, .1);
 27             background-image: -webkit-linear-gradient(top, #35aa47 0, #35aa47 100%);
 28             background-image: -o-linear-gradient(top, #35aa47 0, #35aa47 100%);
 29             background-image: -webkit-gradient(linear, left top, left bottom, from(#35aa47),
 30             to(#35aa47));
 31             background-image: linear-gradient(to bottom, #35aa47 0, #35aa47 100%);
 32             filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff35aa47',
 33             endColorstr='#ff35aa47', GradientType=0);
 34             filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
 35             background-repeat: repeat-x;
 36             border: 1px solid #359947;
 37         }
 38 
 39         .gallery .img-item { position: relative; cursor: pointer; }
 40 
 41         .gallery .img-item .delete { position: absolute; display: block; width: 20px; height: 20px;
 42             color: #fff; background: rgba(232, 0, 0, 0.7);  line-height: 20px; text-align: center;
 43             border-radius: 50%; top: 25px; right: 25px; cursor: pointer; }
 44 
 45         .img { width: 100px; height: 100px; margin: 20px; cursor: pointer;}
 46 
 47         .btn-upload{ margin: 20px; float: left; display: block; width: 100px; height: 100px;
 48             border: 1px solid #ddd; background: #ebebeb; line-height: 100px; font-size: 14px;
 49             text-align: center; color: #808080; cursor: pointer; }
 50         .box {
 51             width: 100%;
 52             height: 100%;
 53             background: #333;
 54             position: absolute;
 55             top:0px;
 56             left:0px;
 57             margin: 0 auto;
 58             align-items: center; /*定义body的元素垂直居中*/
 59             justify-content: center; /*定义body的里的元素水平居中*/
 60             display: none;
 61             overflow: hidden
 62         }
 63         .box img{
 64             width:100%;
 65             position: absolute;
 66         }
 67 
 68     </style>
 69 
 70 </head>
 71 <body>
 72 <form class="layui-form layui-form-pane" id="formdata" method="post" enctype="multipart/form-data">
 73     <!-- 上传图片模块 -->
 74     <div style="padding: 20px; font-size: 30px; ">上传图片</div>
 75     <!-- <form id="formdata" method="post" enctype="multipart/form-data"> -->
 76     <div class="gallery" id="gallery">
 77         <div class="img-item" style="display: inline-block;" id="first-btn-upload">
 78             <label for="btn-upload" class="btn-upload" id="btn-upload">点击上传</label>
 79             <div style="clear: both;"></div>
 80         </div>
 81     </div>
 82     <input id="file" type="file" multiple style="display: none">
 83     <!-- </form> -->
 84     <div class="box">
 85         <img src="" />
 86     </div>
 87     <button class="layui-btn" lay-submit lay-filter="uploadpic" style="display: none" id="uploadpic">上传</button>
 88 
 89     </div>
 90 </form>
 91 <button class="layui-btn" onclick="upload()">上传</button>
 92 <input type="file" id='p_image' accept="image/*" capture='camera' style="opacity: 0"/>
 93 <img id="tempImage" src="" style="display:none;"/>
 94 
 95 <script src="../js/jquery-1.11.3.js"></script> <!-- 你必须先引入jQuery1.8或以上版本 -->
 96 <!-- 必须先引入2.0.8版本的hammer.min.js -->
 97 <script src="../hammer/2.0.8/hammer.min.js" type="text/javascript" charset="utf-8"></script>
 98 <script src="../layui/layui.js"></script>
 99 <script type="text/javascript" src="../js/exif.js"></script>
100 <script>
101     // 保存证照执法
102     function upload(){
103         $("#uploadpic").click();
104     }
105 
106     $(function  () {
107         layui.use('form', function(){
108             var form = layui.form;
109             var layer = layui.layer;
110             //监听提交
111             form.on('submit(uploadpic)', function(data){
112                 layui.use('jquery',function(){
113                     var $=layui.$;
114                     // 创建FormData根据form
115                     var uploaddata = new FormData($("#formdata")[0]);
116                     // 遍历图片数组把图片添加到FormData中
117                     // var files = document.getElementById("file").files;
118                     var maxsize = 0;
119                     for (var i = 0; i < files.length; i++) {
120                         uploaddata.append("file", files[i]);
121                         maxsize = maxsize + files[i].size;
122                     }
123                     if(maxsize>52428800){
124                         layer.msg('上传的文件总大小不能超过50MB，请重新上传！');
125                         return;
126                     }
127                     $.ajax({
128                         type: 'post',
129                         url: '/uploadPics.action', // ajax请求路径
130                         data: uploaddata,
131                         async: false,
132                         // dataType:"json",
133                         contentType: false,
134                         processData: false,
135                         success: function(data){
136 
137                         },
138                         error: function (XMLHttpRequest, textStatus, errorThrown) {
139                             layer.msg("发生错误!");
140                         }
141                     });
142                 });
143                 return false;//禁止跳转，否则会提交两次，且页面会刷新
144 
145             });
146         });
147     })
148 
149     // 预览
150     function preView(obj){
151         var pimg = obj;
152         // var pimg = document.querySelector("img");
153         var oImg = document.querySelector(".box img");
154         var oBox = document.querySelector(".box");
155         // pimg.onclick=function(){
156         oBox.style.display="flex"
157         oImg.src=pimg.src
158         // }
159         oBox.onclick=function(){
160             oBox.style.display="none"
161             oImg.src=''
162         }
163         var hammer = new Hammer(oImg);//hammer实例化
164         hammer.get('pan').set({direction: Hammer.DIRECTION_ALL});//激活pan(移动)功能
165         hammer.get('pinch').set({enable: true});//激活pinch(双指缩放)功能
166         hammer.on("panstart", function(event) {
167             var left = oImg.offsetLeft;
168             var tp = oImg.offsetTop;
169             hammer.on("panmove", function(event) {
170                 oImg.style.left = left + event.deltaX + 'px';
171                 oImg.style.top = tp + event.deltaY + 'px';
172             });
173         })
174 
175         hammer.on("pinchstart", function(e) {
176             hammer.on("pinchout", function(e) {
177                 oImg.style.transition = "-webkit-transform 300ms ease-out";
178                 oImg.style.webkitTransform = "scale(2.5)";
179             });
180             hammer.on("pinchin", function(e) {
181                 oImg.style.transition = "-webkit-transform 300ms ease-out";
182                 oImg.style.webkitTransform = "scale(1)";
183             });
184         })
185     }
186 
187     // 创建数组保存图片
188     var files = new Array();
189     var id = 0;
190     // 选择图片按钮隐藏input[file]
191     $("#btn-upload").click(function() {
192         $("#file").trigger("click");
193     });
194     // 选择图片
195     $("#file").change(function() {
196         // 获取所有图片
197         var img = document.getElementById("file").files;
198         // 遍历
199         for (var i = 0; i < img.length; i++) {
200             // 得到图片
201             var file = img[i];
202             // 判断是否是图片
203 
204             var flag = judgeImgSuffix(file.name);
205             if(flag){
206 
207             }else{
208                 alert("要求图片格式为png,jpg,jpeg,bmp");
209                 return;
210             }
211 
212             // 把图片存到数组中
213             files[id] = file;
214             id++;
215             // 获取图片路径
216             var url = URL.createObjectURL(file);
217 
218             // 创建img
219             var box = document.createElement("img");
220             box.setAttribute("src", url);
221             box.className = 'img';
222             box.onclick = function(){
223                 preView(this);
224             };
225 
226             // 创建div
227             var imgBox = document.createElement("div");
228             imgBox.style.float = 'left';
229             imgBox.className = 'img-item';
230 
231             // 创建span
232             var deleteIcon = document.createElement("span");
233             deleteIcon.className = 'delete';
234             deleteIcon.innerText = 'x';
235             // 把图片名绑定到data里面
236             deleteIcon.id = img[i].name;
237             // 把img和span加入到div中
238             imgBox.appendChild(deleteIcon);
239             imgBox.appendChild(box);
240             // 获取id=gallery的div
241             var body = document.getElementsByClassName("gallery")[0];
242             // body.appendChild(imgBox);
243             var showPlace =document.getElementsByClassName("img-item")[0];
244             body.insertBefore(imgBox,showPlace);
245             // 点击span事件
246             $(deleteIcon).click(function() {
247                 // 获取data中的图片名
248                 var filename = $(this).attr('id');
249                 // 删除父节点
250                 $(this).parent().remove();
251                 var fileList = Array.from(files);
252                 // 遍历数组
253                 for (var j = 0; j < fileList.length; j++) {
254                     // 通过图片名判断图片在数组中的位置然后删除
255                     if (fileList[j].name == filename) {
256                         fileList.splice(j, 1);
257                         id--;
258                         break;
259                     }
260                 }
261                 files = fileList;
262             });
263         }
264     });
265 
266     // 判断是否是图片类型
267     function judgeImgSuffix(path){
268         var index = path.lastIndexOf('.');
269         var suffix = "";
270         if(index > 0){
271             suffix = path.substring(index+1);
272         }
273         if("png"==suffix || "jpg"==suffix || "jpeg"==suffix || "bmp"==suffix || "PNG"==suffix || "JPG"==suffix || "JPEG"==suffix || "BMP"==suffix){
274             return true;
275         }else{
276             return false;
277         }
278     }
279 </script>
280 </body>
281 </html>
后端使用@RequestParam(value="file", required=false) MultipartFile[] file接受图片数据。