利用WebUploader进行图片批量上传，在页面显示后选择多张图片压缩至指定路径【java】

　　WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的FLASH运行时，兼容IE6+，iOS 6+, android 4+。两套运行时，同样的调用方式，可供用户任意选用。
　　jsp代码

1 <div class="upload_buttoncontainer">
2 <button class="upload_accredit"
3 onclick="showuploadimagesPage('upload','fade')">//onclik是打开一个窗口
4 <label>批量上传</label>
5 </button>
6 </div>

　　js代码

  1 (function( $ ){
  2     // 当domReady的时候开始初始化
  3     $(function() {
  4         var $wrap = $('#uploader'),
  5 
  6             // 图片容器
  7             $queue = $( '<ul id="filelist" class="filelist"></ul>' )
  8                 .appendTo( $wrap.find( '.queueList' ) ),
  9 
 10             // 状态栏，包括进度和控制按钮
 11             $statusBar = $wrap.find( '.statusBar' ),
 12 
 13             // 文件总体选择信息。
 14             $info = $statusBar.find( '.info' ),
 15 
 16             // 上传按钮
 17             $upload = $wrap.find( '.uploadBtn' ),
 18 
 19             // 没选择文件之前的内容。
 20             $placeHolder = $wrap.find( '.placeholder' ),
 21 
 22             $progress = $statusBar.find( '.progress' ).hide(),
 23 
 24             // 添加的文件数量
 25             fileCount = 0,
 26 
 27             // 添加的文件总大小
 28             fileSize = 0,
 29 
 30             // 优化retina, 在retina下这个值是2
 31             ratio = window.devicePixelRatio || 1,
 32 
 33             // 缩略图大小
 34             thumbnailWidth = 110 * ratio,
 35             thumbnailHeight = 110 * ratio,
 36 
 37             // 可能有pedding, ready, uploading, confirm, done.
 38             state = 'pedding',
 39 
 40             // 所有文件的进度信息，key为file id
 41             percentages = {},
 42             // 判断浏览器是否支持图片的base64
 43             isSupportBase64 = ( function() {
 44                 var data = new Image();
 45                 var support = true;
 46                 data.onload = data.onerror = function() {
 47                     if( this.width != 1 || this.height != 1 ) {
 48                         support = false;
 49                     }
 50                 }
 51                 data.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
 52                 return support;
 53             } )(),
 54 
 55             // 检测是否已经安装flash，检测flash的版本
 56             flashVersion = ( function() {
 57                 var version;
 58 
 59                 try {
 60                     version = navigator.plugins[ 'Shockwave Flash' ];
 61                     version = version.description;
 62                 } catch ( ex ) {
 63                     try {
 64                         version = new ActiveXObject('ShockwaveFlash.ShockwaveFlash')
 65                                 .GetVariable('$version');
 66                     } catch ( ex2 ) {
 67                         version = '0.0';
 68                     }
 69                 }
 70                 version = version.match( /d+/g );
 71                 return parseFloat( version[ 0 ] + '.' + version[ 1 ], 10 );
 72             } )(),
 73 
 74             supportTransition = (function(){
 75                 var s = document.createElement('p').style,
 76                     r = 'transition' in s ||
 77                             'WebkitTransition' in s ||
 78                             'MozTransition' in s ||
 79                             'msTransition' in s ||
 80                             'OTransition' in s;
 81                 s = null;
 82                 return r;
 83             })(),
 84 
 85             // WebUploader实例
 86             uploader;
 87 
 88         if ( !WebUploader.Uploader.support('flash') && WebUploader.browser.ie ) {
 89 
 90             // flash 安装了但是版本过低。
 91             if (flashVersion) {
 92                 (function(container) {
 93                     window['expressinstallcallback'] = function( state ) {
 94                         switch(state) {
 95                             case 'Download.Cancelled':
 96                                 alert('您取消了更新！')
 97                                 break;
 98 
 99                             case 'Download.Failed':
100                                 alert('安装失败')
101                                 break;
102 
103                             default:
104                                 alert('安装已成功，请刷新！');
105                                 break;
106                         }
107                         delete window['expressinstallcallback'];
108                     };
109 
110                     var swf = './expressInstall.swf';
111                     // insert flash object
112                     var html = '<object type="application/' +
113                             'x-shockwave-flash" data="' +  swf + '" ';
114 
115                     if (WebUploader.browser.ie) {
116                         html += 'classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" ';
117                     }
118 
119                     html += 'width="100%" height="100%" style="outline:0">'  +
120                         '<param name="movie" value="' + swf + '" />' +
121                         '<param name="wmode" value="transparent" />' +
122                         '<param name="allowscriptaccess" value="always" />' +
123                     '</object>';
124 
125                     container.html(html);
126 
127                 })($wrap);
128 
129             // 压根就没有安转。
130             } else {
131                 $wrap.html('<a href="http://www.adobe.com/go/getflashplayer" target="_blank" border="0"><img alt="get flash player" src="http://www.adobe.com/macromedia/style_guide/images/160x41_Get_Flash_Player.jpg" /></a>');
132             }
133 
134             return;
135         } else if (!WebUploader.Uploader.support()) {
136             alert( 'Web Uploader 不支持您的浏览器！');
137             return;
138         }
139 
140         // 实例化
141         uploader = WebUploader.create({
142             pick: {
143                 id: '#filePicker',
144                 label: '点击选择文件'
145             },
146             formData: {
147                 uid: 123
148             },
149             compress: false,//不启用压缩
150             resize: false,//尺寸不改变
151             dnd: '#dndArea',
152             paste: '#uploader',
153             swf: '../js/Uploader.swf',
154             server: ‘后台’,
155             method:'POST',
156             
157             
158             
159             // runtimeOrder: 'flash',
160 
161              accept: {
162                  title: 'Images',
163                  extensions: 'gif,jpg,jpeg,bmp,png',
164                  mimeTypes: 'image/*'
165              },
166 
167             // 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候，把图片打开。
168             disableGlobalDnd: true,
169             fileNumLimit: 300,
170             fileSizeLimit: 2000 * 1024 * 1024,    // 200 M
171             fileSingleSizeLimit: 500 * 1024 * 1024    // 50 M
172         });
173 
174         // 拖拽时不接受 js, txt 文件。
175         uploader.on( 'dndAccept', function( items ) {
176             var denied = false,
177                 len = items.length,
178                 i = 0,
179                 // 修改js类型
180                 unAllowed = 'text/plain;application/javascript ';
181 
182             for ( ; i < len; i++ ) {
183                 // 如果在列表里面
184                 if ( ~unAllowed.indexOf( items[ i ].type ) ) {
185                     denied = true;
186                     break;
187                 }
188             }
189 
190             return !denied;
191         });
192 
193         // uploader.on('filesQueued', function() {
194         //     uploader.sort(function( a, b ) {
195         //         if ( a.name < b.name )
196         //           return -1;
197         //         if ( a.name > b.name )
198         //           return 1;
199         //         return 0;
200         //     });
201         // });
202 
203         // 添加“添加文件”的按钮，
204         uploader.addButton({
205             id: '#filePicker2',
206             label: '继续添加'
207         });
208         // 添加“添加下一个”模型的按钮，
209         /*uploader.addButton({
210             id: '#addModel',
211             label: '添加下一个'
212         });*/
213         uploader.on('ready', function() {
214             window.uploader = uploader;
215         });
216 
217         // 当有文件添加进来时执行，负责view的创建
218         function addFile( file ) {
219             var $li = $( '<li id="' + file.id + '"><div class="item">' +
220                     '<p class="title">' + file.name + '</p>' +
221                     '<p class="imgWrap"></p>'+
222                     '<p class="progress"><span></span></p>' +
223                     '</div></li>' ),
224 
225                 $btns = $('<div class="file-panel">' +
226                     '<span class="cancel">删除</span>' +
227                     '<span class="rotateRight">向右旋转</span>' +
228                     '<span class="rotateLeft">向左旋转</span></div>').appendTo( $li.find('.item') ),
229                 $prgress = $li.find('p.progress span'),
230                 $wrap = $li.find( 'p.imgWrap' ),
231                 $info = $('<p class="error"></p>'),
232 
233                 showError = function( code ) {
234                     switch( code ) {
235                         case 'exceed_size':
236                             text = '文件大小超出';
237                             break;
238 
239                         case 'interrupt':
240                             text = '上传暂停';
241                             break;
242 
243                         default:
244                             text = '上传失败，请重试';
245                             break;
246                     }
247 
248                     $info.text( text ).appendTo( $li );
249                 };
250 
251             if ( file.getStatus() === 'invalid' ) {
252                 showError( file.statusText );
253             } else {
254                 // @todo lazyload
255                 $wrap.text( '预览中' );
256                 uploader.makeThumb( file, function( error, src ) {
257                     var img;
258 
259                     if ( error ) {
260                         $wrap.text( '不能预览' );
261                         return;
262                     }
263 
264                     if( isSupportBase64 ) {
265                         img = $('<img src="'+src+'">');
266                         $wrap.empty().append( img );
267                     } 
268                 }, thumbnailWidth, thumbnailHeight );
269 
270                 percentages[ file.id ] = [ file.size, 0 ];
271                 file.rotation = 0;
272             }
273 
274             file.on('statuschange', function( cur, prev ) {
275                 if ( prev === 'progress' ) {
276                     $prgress.hide().width(0);
277                 } else if ( prev === 'queued' ) {
278                     $li.off( 'mouseenter mouseleave' );
279                     $btns.remove();
280                 }
281 
282                 // 成功
283                 if ( cur === 'error' || cur === 'invalid' ) {
284                     console.log( file.statusText );
285                     showError( file.statusText );
286                     percentages[ file.id ][ 1 ] = 1;
287                 } else if ( cur === 'interrupt' ) {
288                     showError( 'interrupt' );
289                 } else if ( cur === 'queued' ) {
290                     percentages[ file.id ][ 1 ] = 0;
291                 } else if ( cur === 'progress' ) {
292                     $info.remove();
293                     $prgress.css('display', 'block');
294                 } else if ( cur === 'complete' ) {
295                     $li.append( '<span class="success"></span>' );
296                 }
297 
298                 $li.removeClass( 'state-' + prev ).addClass( 'state-' + cur );
299             });
300 
301             $li.on( 'mouseenter', function() {
302                 $btns.stop().animate({height: 30});
303             });
304 
305             $li.on( 'mouseleave', function() {
306                 $btns.stop().animate({height: 0});
307             });
308 
309             $btns.on( 'click', 'span', function() {
310                 var index = $(this).index(),
311                     deg;
312 
313                 switch ( index ) {
314                     case 0:
315                         uploader.removeFile( file );
316                         return;
317 
318                     case 1:
319                         file.rotation += 90;
320                         break;
321 
322                     case 2:
323                         file.rotation -= 90;
324                         break;
325                 }
326 
327                 if ( supportTransition ) {
328                     deg = 'rotate(' + file.rotation + 'deg)';
329                     $wrap.css({
330                         '-webkit-transform': deg,
331                         '-mos-transform': deg,
332                         '-o-transform': deg,
333                         'transform': deg
334                     });
335                 } else {
336                     $wrap.css( 'filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ (~~((file.rotation/90)%4 + 4)%4) +')');
337                     // use jquery animate to rotation
338                     // $({
339                     //     rotation: rotation
340                     // }).animate({
341                     //     rotation: file.rotation
342                     // }, {
343                     //     easing: 'linear',
344                     //     step: function( now ) {
345                     //         now = now * Math.PI / 180;
346 
347                     //         var cos = Math.cos( now ),
348                     //             sin = Math.sin( now );
349 
350                     //         $wrap.css( 'filter', "progid:DXImageTransform.Microsoft.Matrix(M11=" + cos + ",M12=" + (-sin) + ",M21=" + sin + ",M22=" + cos + ",SizingMethod='auto expand')");
351                     //     }
352                     // });
353                 }
354 
355 
356             });
357 
358             $li.appendTo( $queue );
359             $('.filelist').sortable();
360         }
361 
362         // 负责view的销毁
363         function removeFile( file ) {
364             var $li = $('#'+file.id);
365 
366             delete percentages[ file.id ];
367             updateTotalProgress();
368             $li.off().find('.file-panel').off().end().remove();
369         }
370 
371         function updateTotalProgress() {
372             var loaded = 0,
373                 total = 0,
374                 spans = $progress.children(),
375                 percent;
376 
377             $.each( percentages, function( k, v ) {
378                 total += v[ 0 ];
379                 loaded += v[ 0 ] * v[ 1 ];
380             } );
381 
382             percent = total ? loaded / total : 0;
383 
384 
385             spans.eq( 0 ).text( Math.round( percent * 100 ) + '%' );
386             spans.eq( 1 ).css( 'width', Math.round( percent * 100 ) + '%' );
387             updateStatus();
388         }
389 
390         function updateStatus() {
391             var text = '', stats;
392 
393             if ( state === 'ready' ) {
394                 text = '选中' + fileCount + '张图片，共' +
395                         WebUploader.formatSize( fileSize ) + '。';
396             } else if ( state === 'confirm' ) {
397                 stats = uploader.getStats();
398                 if ( stats.uploadFailNum ) {
399                     text = '已成功上传' + stats.successNum+ '文件，'+
400                         stats.uploadFailNum + '文件上传失败，<a class="retry" href="#">重新上传</a>失败或<a class="ignore" href="#">忽略</a>'
401                 }
402 
403             } else {
404                 stats = uploader.getStats();
405                 text = '共' + fileCount + '个（' +
406                         WebUploader.formatSize( fileSize )  +
407                         '），已上传' + (stats.successNum+1) + '个';
408 
409                 if ( stats.uploadFailNum ) {
410                     text += '，失败' + stats.uploadFailNum + '个';
411                 }
412             }
413 
414             $info.html( text );
415         }
416 
417         function setState( val ) {
418             var file, stats;
419 
420             if ( val === state ) {
421                 return;
422             }
423 
424             $upload.removeClass( 'state-' + state );
425             $upload.addClass( 'state-' + val );
426             state = val;
427 
428             switch ( state ) {
429                 case 'pedding':
430                     $placeHolder.removeClass( 'element-invisible' );
431                     $queue.hide();
432                     $statusBar.addClass( 'element-invisible' );
433                     uploader.refresh();
434                     break;
435 
436                 case 'ready':
437                     $placeHolder.addClass( 'element-invisible' );
438                     $( '#filePicker2' ).removeClass( 'element-invisible');
439                     $queue.show();
440                     $statusBar.removeClass('element-invisible');
441                     uploader.refresh();
442                     break;
443 
444                 case 'uploading':
445                     $( '#filePicker2' ).addClass( 'element-invisible' );
446                     $progress.show();
447                     $upload.text( '暂停上传' );
448                     break;
449 
450                 case 'paused':
451                     $progress.show();
452                     $upload.text( '继续上传' );
453                     break;
454 
455                 case 'confirm':
456                     $progress.hide();
457                     $( '#filePicker2' ).removeClass( 'element-invisible' );
458                     $upload.text( '开始上传' );
459                     /*$('#filePicker2 + .uploadBtn').click(function () {
460                         window.location.reload();
461                     });*/
462                     stats = uploader.getStats();
463                     if ( stats.successNum && !stats.uploadFailNum ) {
464                         setState( 'finish' );
465                         return;
466                     }
467                     break;
468                 case 'finish':
469                     stats = uploader.getStats();
470                     if ( stats.successNum ) {
471                         document.getElementById("shareUrl").style.visibility = 'visible';
472                         createQrcode();
473                     } else {
474                         // 没有成功的图片，重设
475                         state = 'done';
476                         location.reload();
477                     }
478                     break;
479             }
480 
481             updateStatus();
482         }
483 
484         uploader.onUploadProgress = function( file, percentage ) {
485             var $li = $('#'+file.id),
486                 $percent = $li.find('.progress span');
487 
488             $percent.css( 'width', percentage * 100 + '%' );
489             percentages[ file.id ][ 1 ] = percentage;
490             updateTotalProgress();
491         };
492 
493         uploader.onFileQueued = function( file ) {
494             fileCount++;
495             fileSize += file.size;
496 
497             if ( fileCount === 1 ) {
498                 $placeHolder.addClass( 'element-invisible' );
499                 $statusBar.show();
500             }
501 
502             addFile( file );
503             setState( 'ready' );
504             updateTotalProgress();
505         };
506 
507         uploader.onFileDequeued = function( file ) {
508             fileCount--;
509             fileSize -= file.size;
510 
511             if ( !fileCount ) {
512                 setState( 'pedding' );
513             }
514 
515             removeFile( file );
516             updateTotalProgress();
517 
518         };
519 
520         uploader.on( 'all', function( type ) {
521             var stats;
522             switch( type ) {
523                 case 'uploadFinished':
524                     setState( 'confirm' );
525                     break;
526 
527                 case 'startUpload':
528                     setState( 'uploading' );
529                     break;
530 
531                 case 'stopUpload':
532                     setState( 'paused' );
533                     break;
534 
535             }
536         });
537 
538         uploader.onError = function( code ) {
539             alert( '图片重复' );
540         };
541 
542         $upload.on('click', function() {
543             if ( $(this).hasClass( 'disabled' ) ) {
544                 return false;
545             }
546 
547             if ( state === 'ready' ) {
548                 uploader.upload();
549             } else if ( state === 'paused' ) {
550                 uploader.upload();
551             } else if ( state === 'uploading' ) {
552                 uploader.stop();
553             }
554         });
555 
556         $info.on( 'click', '.retry', function() {
557             uploader.retry();
558         } );
559 
560         $info.on( 'click', '.ignore', function() {
561             alert( 'todo' );
562         } );
563 
564         $upload.addClass( 'state-' + state );
565         updateTotalProgress();
566     });
567 
568 })( jQuery );

　　后台代码

MultipartFile 需要在配置文件中进行配置上传的文件的大小，在这里我就不贴出来了

 1 public void uploadInformation(HttpServletRequest request,
 2             HttpServletResponse response) {
 3         System.out.println("收到图片!");
 4         MultipartHttpServletRequest Murequest = (MultipartHttpServletRequest) request;
 5         Map<String, MultipartFile> files = Murequest.getFileMap();// 得到文件map对象
 6         String upaloadUrl = new File(this.getClass().getClassLoader().getResource("/").getPath()).getParentFile().getParentFile()
 7                 .getAbsolutePath()
 8                 + "/upload/";// 得到当前工程路径拼接上文件名
 9         File dir = new File(upaloadUrl);
10         if (!dir.exists())// 目录不存在则创建
11             dir.mkdirs();
12         int counter = 0;
13         for (MultipartFile file : files.values()) {
14             counter++;
15             String fileName = file.getOriginalFilename();
16             File tagetFile = new File(upaloadUrl + fileName);// 创建文件对象
17             if (!tagetFile.exists()) {// 文件名不存在 则新建文件，并将文件复制到新建文件中
18                 try {
19                     tagetFile.createNewFile();
20                 } catch (IOException e) {
21                     e.printStackTrace();
22                 }
23                 try {
24                     file.transferTo(tagetFile);
25                 } catch (IllegalStateException e) {
26                     e.printStackTrace();
27                 } catch (IOException e) {
28                     e.printStackTrace();
29                 }
30             }
31 
32         }
33         System.out.println("接收完毕");
34     }

　　这样图片批量上传的功能就实现了，当然也可以批量上传文件，只不过需要一些变动，有兴趣的可以去http://fex.baidu.com/webuploader/ 研究一下。接下来就是选择多张图片进行压缩并保存到指定路径下，关于图片在页面的显示在这里就略过了。接下来是关于压缩文件的action代码

 1 public void yasuoIamges(HttpServletRequest request,
 2             HttpServletResponse response) throws Exception {
 3         String selids = request.getParameter("selTids");//选中图片的ID组成的字符串
 4         String date_format = "yyyy-MM-dd_HH_mm_ss";
 5         SimpleDateFormat f = new         
 6                 SimpleDateFormat(date_format);
 7         List<File> filelist = new ArrayList<>();
 8         String[] uid = selids.split(",");
 9         for (int i = 0; i < uid.length; i++) {
10             Images du = imagesService.getoneimage(Long
11                     .valueOf(uid[i]));
12             filelist.add(new File(new File(this.getClass().getClassLoader()
13                     .getResource("/").getPath()).getParentFile()
14                     .getParentFile().getAbsolutePath()
15                     + "/" + du.getDupath()));
16         }
17         String icpath = new File(this.getClass().getClassLoader()
18                 .getResource("/").getPath()).getParentFile().getParentFile()
19                 .getAbsolutePath()
20                 + "/compress/";
21         File dir = new File(icpath);
22         if (!dir.exists())// 目录不存在则创建
23             dir.mkdirs();
24         String filename = (f.format(new Date())) + ".rar";// 压缩包格式可以改
25         FileOutputStream fos = new FileOutputStream(icpath + filename);
26         ZipOutputStream zos = null;
27         try {
28             zos = new ZipOutputStream(fos);
29             for (File srcFile : filelist) {
30                 byte[] buf = new byte[BUFFER_SIZE];
31                 zos.putNextEntry(new ZipEntry(srcFile.getName()));
32                 int len;
33                 FileInputStream in = new FileInputStream(srcFile);
34                 while ((len = in.read(buf)) != -1) {
35                     zos.write(buf, 0, len);
36                 }
37                 zos.closeEntry();
38                 in.close();
39             }
40         } catch (Exception e) {
41             throw new RuntimeException("zip error from ZipUtils", e);
42         } finally {
43             if (zos != null) {
44                 try {
45                     zos.close();
46                 } catch (IOException e) {
47                     e.printStackTrace();
48                 }
49             }
50         }
51         
52     }

　　第一次写博客很多东西不是很会说，请谅解，也希望大家能有所收获。