webuploader 实现图片批量上传功能附实例代码

1、导入资源

 

2、jsp代码

<div class="page-container">
    <div class="row cl">
      <label class="form-label col-xs-4 col-sm-2"><span
        class="c-red">*</span>项目名称：</label>
      <div class="formcontrols col-xs-8 col-sm-9">
        <input type="text" class="input-text" value="${proname }"
          placeholder="" id="" name="proname" readonly="readonly">
      </div>
    </div>
    <div class="row cl">
      <label class="form-label col-xs-4 col-sm-2">缩略图：</label>
      <div class="formcontrols col-xs-8 col-sm-9">
        <div class="uploader-thum-container">
          <div id="filelist" class="uploader-list"></div>
          <div id="filepicker">选择图片</div>
          <button id="btn-star"
            class="btn btn-default btn-uploadstar radius ml-10">开始上传</button>
        </div>
      </div>
    </div>
    <div class="row cl">
      <label class="form-label col-xs-4 col-sm-2"><span
        class="c-red">*</span>项目发票上传：</label>
      <div class="formcontrols col-xs-8 col-sm-9">
        <div class="uploader-list-container">
          <div class="queuelist">
            <div id="dndarea" class="placeholder">
              <div id="filepicker-2"></div>
              <p>或将照片拖到这里，单次最多可选300张</p>
            </div>
          </div>
          <div class="statusbar" style="display:none;">
            <div class="progress">
              <span class="text">0%</span> <span class="percentage"></span>
            </div>
            <div class="info"></div>
            <div class="btns">
              <div id="filepicker2"></div>
              <div class="uploadbtn">开始上传</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row cl">
      <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
        <button
          onclick="article_add('','invoicevo/save?&projectid=${projectid}&invoicescan=','10001');"
          class="btn btn-primary radius" type="button">
          <i class="hui-iconfont"></i>   保存
        </button>
      </div>
    </div>
  </div>

   3、js代码

1. <script type="text/javascript"> 
2.   var imagepath=null; 
3.     function article_save() { 
4.       alert("刷新父级的时候会自动关闭弹层。"); 
5.       window.parent.location.reload(); 
6.     } 
7.     /*项目发票-添加*/ 
8.     function article_add(title, url, w, h) { 
9.     if(imagepath){ 
10.       var index = layer.open({ 
11.         type : 2, 
12.         title : title, 
13.         content : url+imagepath 
14.       }); 
15.       layer.full(index); 
16.     }else{alert("没有上传图片，请先上传图片");} 
17.     } 
18.     $(function() { 
19.       $('.skin-minimal input').icheck({ 
20.         checkboxclass : 'icheckbox-blue', 
21.         radioclass : 'iradio-blue', 
22.         increasearea : '20%' 
23.       }); 
24.       $list = $("#filelist"), $btn = $("#btn-star"), state = "pending", 
25.           uploader; 
26.       var uploader = webuploader.create({ 
27.         auto : true, 
28.         swf : 'lib/webuploader/0.1.5/uploader.swf',// swf文件路径 
29.         // 文件接收服务端。 
30.         server : 'lib/webuploader/0.1.5/server/fileupload.php', // 文件接收服务端。 
31.         // 选择文件的按钮。可选。 
32.         // 内部根据当前运行是创建，可能是input元素，也可能是flash. 
33.         pick : '#filepicker', 
34.         // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！ 
35.         resize : false, 
36.         // 只允许选择图片文件。 
37.         accept : { 
38.           title : 'images', 
39.           extensions : 'gif,jpg,jpeg,bmp,png', 
40.           mimetypes : 'image/*' 
41.         } 
42.       }); 
43.       // 当有文件被添加进队列的时候 
44.       uploader 
45.           .on( 
46.               'filequeued', 
47.               function(file) { 
48.                 var $li = $('<div id="' + file.id + '" class="item">' 
49.                     + '<div class="pic-box"><img></div>' 
50.                     + '<div class="info">' 
51.                     + file.name 
52.                     + '</div>' 
53.                     + '<p class="state">等待上传...</p>' 
54.                     + '</div>'), $img = $li.find('img'); 
55.                 $list.append($li); 
56.                 // 创建缩略图 
57.                 // 如果为非图片文件，可以不用调用此方法。 
58.                 // thumbnailwidth x thumbnailheight 为 100 x 100 
59.                 uploader.makethumb(file, function(error, src) { 
60.                   if (error) { 
61.                     $img.replacewith('<span>不能预览</span>'); 
62.                     return; 
63.                   } 
64.                   $img.attr('src', src); 
65.                 }, thumbnailwidth, thumbnailheight); 
66.               }); 
67.       // 文件上传过程中创建进度条实时显示。 
68.       uploader 
69.           .on( 
70.               'uploadprogress', 
71.               function(file, percentage) { 
72.                 var $li = $('#' + file.id), $percent = $li 
73.                     .find('.progress-box .sr-only'); 
74.                 // 避免重复创建 
75.                 if (!$percent.length) { 
76.                   $percent = $( 
77.                       '<div class="progress-box"><span class="progress-bar radius"><span class="sr-only" style="width:0%"></span></span></div>') 
78.                       .appendto($li).find('.sr-only'); 
79.                 } 
80.                 $li.find(".state").text("上传中"); 
81.                 $percent.css('width', percentage * 100 + '%'); 
82.               }); 
83.       // 文件上传成功，给item添加成功class, 用样式标记上传成功。 
84.       uploader.on('uploadsuccess', function(file) { 
85.         $('#' + file.id).addclass('upload-state-success') 
86.             .find(".state").text("已上传"); 
87.       }); 
88.       // 文件上传失败，显示上传出错。 
89.       uploader.on('uploaderror', function(file) { 
90.         $('#' + file.id).addclass('upload-state-error').find(".state") 
91.             .text("上传出错"); 
92.       }); 
93.       // 完成上传完了，成功或者失败，先删除进度条。 
94.       uploader.on('uploadcomplete', function(file) { 
95.         $('#' + file.id).find('.progress-box').fadeout(); 
96.       }); 
97.       uploader.on('all', function(type) { 
98.         if (type === 'startupload') { 
99.           state = 'uploading'; 
100.         } else if (type === 'stopupload') { 
101.           state = 'paused'; 
102.         } else if (type === 'uploadfinished') { 
103.           state = 'done'; 
104.         } 
105.         if (state === 'uploading') { 
106.           $btn.text('暂停上传'); 
107.         } else { 
108.           $btn.text('开始上传'); 
109.         } 
110.       }); 
111.       $btn.on('click', function() { 
112.         if (state === 'uploading') { 
113.           uploader.stop(); 
114.         } else { 
115.           uploader.upload(); 
116.         } 
117.       }); 
118.     }); 
119.     (function($) { 
120.       // 当domready的时候开始初始化 
121.       $(function() { 
122.         var $wrap = $('.uploader-list-container'), 
123.         // 图片容器 
124.         $queue = $('<ul class="filelist"></ul>').appendto( 
125.             $wrap.find('.queuelist')), 
126.         // 状态栏，包括进度和控制按钮 
127.         $statusbar = $wrap.find('.statusbar'), 
128.         // 文件总体选择信息。 
129.         $info = $statusbar.find('.info'), 
130.         // 上传按钮 
131.         $upload = $wrap.find('.uploadbtn'), 
132.         // 没选择文件之前的内容。 
133.         $placeholder = $wrap.find('.placeholder'), 
134.         $progress = $statusbar.find('.progress').hide(), 
135.         // 添加的文件数量 
136.         filecount = 0, 
137.         // 添加的文件总大小 
138.         filesize = 0, 
139.         // 优化retina, 在retina下这个值是2 
140.         ratio = window.devicepixelratio || 1, 
141.         // 缩略图大小 
142.         thumbnailwidth = 110 * ratio, thumbnailheight = 110 * ratio, 
143.         // 可能有pedding, ready, uploading, confirm, done. 
144.         state = 'pedding', 
145.         // 所有文件的进度信息，key为file id 
146.         percentages = {}, 
147.         // 判断浏览器是否支持图片的base64 
148.         issupportbase64 = (function() { 
149.           var data = new image(); 
150.           var support = true; 
151.           data.onload = data.onerror = function() { 
152.             if (this.width != 1 || this.height != 1) { 
153.               support = false; 
154.             } 
155.           } 
156.           data.src = "data:image/gif;base64,r0lgodlhaqabaiaaaaaaap///ywaaaaaaqabaaacauwaow=="; 
157.           return support; 
158.         })(), 
159.         // 检测是否已经安装flash，检测flash的版本 
160.         flashversion = (function() { 
161.           var version; 
162.           try { 
163.             version = navigator.plugins['shockwave flash']; 
164.             version = version.description; 
165.           } catch (ex) { 
166.             try { 
167.               version = new activexobject( 
168.                   'shockwaveflash.shockwaveflash') 
169.                   .getvariable('$version'); 
170.             } catch (ex2) { 
171.               version = '0.0'; 
172.             } 
173.           } 
174.           version = version.match(/d+/g); 
175.           return parsefloat(version[0] + '.' + version[1], 10); 
176.         })(), 
177.         supporttransition = (function() { 
178.           var s = document.createelement('p').style, r = 'transition' in s 
179.               || 'webkittransition' in s 
180.               || 'moztransition' in s 
181.               || 'mstransition' in s || 'otransition' in s; 
182.           s = null; 
183.           return r; 
184.         })(), 
185.         // webuploader实例 
186.         uploader; 
187.         if (!webuploader.uploader.support('flash') 
188.             && webuploader.browser.ie) { 
189.           // flash 安装了但是版本过低。 
190.           if (flashversion) { 
191.             (function(container) { 
192.               window['expressinstallcallback'] = function(state) { 
193.                 switch (state) { 
194.                 case 'download.cancelled': 
195.                   alert('您取消了更新！') 
196.                   break; 
197.                 case 'download.failed': 
198.                   alert('安装失败') 
199.                   break; 
200.                 default: 
201.                   alert('安装已成功，请刷新！'); 
202.                   break; 
203.                 } 
204.                 delete window['expressinstallcallback']; 
205.               }; 
206.               var swf = 'expressinstall.swf'; 
207.               // insert flash object 
208.               var html = '<object type="application/' 
209.                   + 'x-shockwave-flash" data="' + swf + '" '; 
210.               if (webuploader.browser.ie) { 
211.                 html += 'classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" '; 
212.               } 
213.               html += 'width="100%" height="100%" style="outline:0">' 
214.                   + '<param name="movie" value="' + swf + '" />' 
215.                   + '<param name="wmode" value="transparent" />' 
216.                   + '<param name="allowscriptaccess" value="always" />' 
217.                   + '</object>'; 
218.               container.html(html); 
219.             })($wrap); 
220.             // 压根就没有安转。 
221.           } else { 
222.             $wrap 
223.                 .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>'); 
224.           } 
225.           return; 
226.         } else if (!webuploader.uploader.support()) { 
227.           alert('web uploader 不支持您的浏览器！'); 
228.           return; 
229.         } 
230.         // 实例化 
231.         uploader = webuploader.create({ 
232.           pick : { 
233.             id : '#filepicker-2', 
234.             label : '点击选择图片' 
235.           }, 
236.           formdata : { 
237.             uid : 123 
238.           }, 
239.           dnd : '#dndarea', 
240.           paste : '#uploader', 
241.           swf : 'lib/webuploader/0.1.5/uploader.swf', 
242.           chunked : false, 
243.           chunksize : 512 * 1024, 
244.           server : 'invoicevo/news_uploder?&projectid=${projectid}', 
245.           // runtimeorder: 'flash', 
246.           // accept: { 
247.           //   title: 'images', 
248.           //   extensions: 'gif,jpg,jpeg,bmp,png', 
249.           //   mimetypes: 'image/*' 
250.           // }, 
251.           // 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候，把图片打开。 
252.           disableglobaldnd : true, 
253.           filenumlimit : 300, 
254.           filesizelimit : 200 * 1024 * 1024, // 200 m 
255.           filesinglesizelimit : 50 * 1024 * 1024 
256.         // 50 m 
257.         }); 
258.         // 拖拽时不接受 js, txt 文件。 
259.         uploader.on('dndaccept', function(items) { 
260.           var denied = false, len = items.length, i = 0, 
261.           // 修改js类型 
262.           unallowed = 'text/plain;application/javascript '; 
263.           for (; i < len; i++) { 
264.             // 如果在列表里面 
265.             if (~unallowed.indexof(items[i].type)) { 
266.               denied = true; 
267.               break; 
268.             } 
269.           } 
270.           return !denied; 
271.         }); 
272.         uploader.on('dialogopen', function() { 
273.           console.log('here'); 
274.         }); 
275.         // uploader.on('filesqueued', function() { 
276.         //   uploader.sort(function( a, b ) { 
277.         //     if ( a.name < b.name ) 
278.         //      return -1; 
279.         //     if ( a.name > b.name ) 
280.         //      return 1; 
281.         //     return 0; 
282.         //   }); 
283.         // }); 
284.         // 添加“添加文件”的按钮， 
285. /*         uploader.addbutton({ 
286.           id : '#filepicker2', 
287.           label : '继续添加' 
288.         }); */ 
289.         uploader.on('ready', function() { 
290.           window.uploader = uploader; 
291.         }); 
292.         // 当有文件添加进来时执行，负责view的创建 
293.         function addfile(file) { 
294.           var $li = $('<li id="' + file.id + '">' 
295.               + '<p class="title">' + file.name + '</p>' 
296.               + '<p class="imgwrap"></p>' 
297.               + '<p class="progress"><span></span></p>' + '</li>'), 
298.           $btns = $( 
299.               '<div class="file-panel">' 
300.                   + '<span class="cancel">删除</span>' 
301.                   + '<span class="rotateright">向右旋转</span>' 
302.                   + '<span class="rotateleft">向左旋转</span></div>') 
303.               .appendto($li), $prgress = $li 
304.               .find('p.progress span'), $wrap = $li 
305.               .find('p.imgwrap'), $info = $('<p class="error"></p>'), 
306.           showerror = function(code) { 
307.             switch (code) { 
308.             case 'exceed_size': 
309.               text = '文件大小超出'; 
310.               break; 
311.             case 'interrupt': 
312.               text = '上传暂停'; 
313.               break; 
314.             default: 
315.               text = '上传失败，请重试'; 
316.               break; 
317.             } 
318.             $info.text(text).appendto($li); 
319.           }; 
320.           if (file.getstatus() === 'invalid') { 
321.             showerror(file.statustext); 
322.           } else { 
323.             // @todo lazyload 
324.             $wrap.text('预览中'); 
325.             uploader 
326.                 .makethumb( 
327.                     file, 
328.                     function(error, src) { 
329.                       var img; 
330.                       if (error) { 
331.                         $wrap.text('不能预览'); 
332.                         return; 
333.                       } 
334.                       if (issupportbase64) { 
335.                         img = $('<img src="'+src+'">'); 
336.                         $wrap.empty().append(img); 
337.                       } else { 
338.                         $ 
339.                             .ajax( 
340.                                 'lib/webuploader/0.1.5/server/preview.php', 
341.                                 { 
342.                                   method : 'post', 
343.                                   data : src, 
344.                                   datatype : 'json' 
345.                                 }) 
346.                             .done( 
347.                                 function( 
348.                                     response) { 
349.                                   if (response.result) { 
350.                                     img = $('<img src="'+response.result+'">'); 
351.                                     $wrap 
352.                                         .empty() 
353.                                         .append( 
354.                                             img); 
355.                                   } else { 
356.                                     $wrap 
357.                                         .text("预览出错"); 
358.                                   } 
359.                                 }); 
360.                       } 
361.                     }, thumbnailwidth, thumbnailheight); 
362.             percentages[file.id] = [ file.size, 0 ]; 
363.             file.rotation = 0; 
364.           } 
365.           file.on('statuschange', function(cur, prev) { 
366.             if (prev === 'progress') { 
367.               $prgress.hide().width(0); 
368.             } else if (prev === 'queued') { 
369.               $li.off('mouseenter mouseleave'); 
370.               $btns.remove(); 
371.             } 
372.             // 成功 
373.             if (cur === 'error' || cur === 'invalid') { 
374.               console.log(file.statustext); 
375.               showerror(file.statustext); 
376.               percentages[file.id][1] = 1; 
377.             } else if (cur === 'interrupt') { 
378.               showerror('interrupt'); 
379.             } else if (cur === 'queued') { 
380.               percentages[file.id][1] = 0; 
381.             } else if (cur === 'progress') { 
382.               $info.remove(); 
383.               $prgress.css('display', 'block'); 
384.             } else if (cur === 'complete') { 
385.               $li.append('<span class="success"></span>'); 
386.             } 
387.             $li.removeclass('state-' + prev).addclass( 
388.                 'state-' + cur); 
389.           }); 
390.           $li.on('mouseenter', function() { 
391.             $btns.stop().animate({ 
392.               height : 30 
393.             }); 
394.           }); 
395.           $li.on('mouseleave', function() { 
396.             $btns.stop().animate({ 
397.               height : 0 
398.             }); 
399.           }); 
400.           $btns 
401.               .on( 
402.                   'click', 
403.                   'span', 
404.                   function() { 
405.                     var index = $(this).index(), deg; 
406.                     switch (index) { 
407.                     case 0: 
408.                       uploader.removefile(file); 
409.                       return; 
410.                     case 1: 
411.                       file.rotation += 90; 
412.                       break; 
413.                     case 2: 
414.                       file.rotation -= 90; 
415.                       break; 
416.                     } 
417.                     if (supporttransition) { 
418.                       deg = 'rotate(' + file.rotation 
419.                           + 'deg)'; 
420.                       $wrap.css({ 
421.                         '-webkit-transform' : deg, 
422.                         '-mos-transform' : deg, 
423.                         '-o-transform' : deg, 
424.                         'transform' : deg 
425.                       }); 
426.                     } else { 
427.                       $wrap 
428.                           .css( 
429.                               'filter', 
430.                               'progid:dximagetransform.microsoft.basicimage(rotation=' 
431.                                   + (~~((file.rotation / 90) % 4 + 4) % 4) 
432.                                   + ')'); 
433.                     } 
434.                   }); 
435.           $li.appendto($queue); 
436.         } 
437.         // 负责view的销毁 
438.         function removefile(file) { 
439.           var $li = $('#' + file.id); 
440.           delete percentages[file.id]; 
441.           updatetotalprogress(); 
442.           $li.off().find('.file-panel').off().end().remove(); 
443.         } 
444.         function updatetotalprogress() { 
445.           var loaded = 0, total = 0, spans = $progress.children(), percent; 
446.           $.each(percentages, function(k, v) { 
447.             total += v[0]; 
448.             loaded += v[0] * v[1]; 
449.           }); 
450.           percent = total ? loaded / total : 0; 
451.           spans.eq(0).text(math.round(percent * 100) + '%'); 
452.           spans.eq(1).css('width', math.round(percent * 100) + '%'); 
453.           updatestatus(); 
454.         } 
455.         function updatestatus() { 
456.           var text = '', stats; 
457.           if (state === 'ready') { 
458.             text = '选中' + filecount + '张图片，共' 
459.                 + webuploader.formatsize(filesize) + '。'; 
460.           } else if (state === 'confirm') { 
461.             stats = uploader.getstats(); 
462.             if (stats.uploadfailnum) { 
463.               text = '已成功上传' 
464.                   + stats.successnum 
465.                   + '张照片至xx相册，' 
466.                   + stats.uploadfailnum 
467.                   + '张照片上传失败，<a class="retry" href="#" rel="external nofollow" rel="external nofollow" >重新上传</a>失败图片或<a class="ignore" href="#" rel="external nofollow" rel="external nofollow" >忽略</a>' 
468.             } 
469.           } else { 
470.             stats = uploader.getstats(); 
471.             text = '共' + filecount + '张（' 
472.                 + webuploader.formatsize(filesize) + '），已上传' 
473.                 + stats.successnum + '张'; 
474.             if (stats.uploadfailnum) { 
475.               text += '，失败' + stats.uploadfailnum + '张'; 
476.             } 
477.           } 
478.           $info.html(text); 
479.         } 
480.         function setstate(val) { 
481.           var file, stats; 
482.           if (val === state) { 
483.             return; 
484.           } 
485.           $upload.removeclass('state-' + state); 
486.           $upload.addclass('state-' + val); 
487.           state = val; 
488.           switch (state) { 
489.           case 'pedding': 
490.             $placeholder.removeclass('element-invisible'); 
491.             $queue.hide(); 
492.             $statusbar.addclass('element-invisible'); 
493.             uploader.refresh(); 
494.             break; 
495.           case 'ready': 
496.             $placeholder.addclass('element-invisible'); 
497.             $('#filepicker2').removeclass('element-invisible'); 
498.             $queue.show(); 
499.             $statusbar.removeclass('element-invisible'); 
500.             uploader.refresh(); 
501.             break; 
502.           case 'uploading': 
503.             $('#filepicker2').addclass('element-invisible'); 
504.             $progress.show(); 
505.             $upload.text('暂停上传'); 
506.             break; 
507.           case 'paused': 
508.             $progress.show(); 
509.             $upload.text('继续上传'); 
510.             break; 
511.           case 'confirm': 
512.             $progress.hide(); 
513.             $('#filepicker2').removeclass('element-invisible'); 
514.             $upload.text('开始上传'); 
515.             stats = uploader.getstats(); 
516.             if (stats.successnum && !stats.uploadfailnum) { 
517.               setstate('finish'); 
518.               return; 
519.             } 
520.             break; 
521.           case 'finish': 
522.             stats = uploader.getstats(); 
523.             if (stats.successnum) { 
524.               alert('上传成功'); 
525.             } else { 
526.               // 没有成功的图片，重设 
527.               state = 'done'; 
528.               location.reload(); 
529.             } 
530.             break; 
531.           } 
532.           updatestatus(); 
533.         } 
534.         uploader.onuploadprogress = function(file, percentage) { 
535.           var $li = $('#' + file.id), $percent = $li 
536.               .find('.progress span'); 
537.           $percent.css('width', percentage * 100 + '%'); 
538.           percentages[file.id][1] = percentage; 
539.           updatetotalprogress(); 
540.         }; 
541.         uploader.onfilequeued = function(file) { 
542.           filecount++; 
543.           filesize += file.size; 
544.           if (filecount === 1) { 
545.             $placeholder.addclass('element-invisible'); 
546.             $statusbar.show(); 
547.           } 
548.           addfile(file); 
549.           setstate('ready'); 
550.           updatetotalprogress(); 
551.         }; 
552.         uploader.onfiledequeued = function(file) { 
553.           filecount--; 
554.           filesize -= file.size; 
555.           if (!filecount) { 
556.             setstate('pedding'); 
557.           } 
558.           removefile(file); 
559.           updatetotalprogress(); 
560.         }; 
561.         /*获取服务器返回的数据*/ 
562.         uploader.on('uploadsuccess', function(file, response) { 
563.           alert(response.status); 
564.           if (response.status == "success") { 
565.             imagepath =response.filepath; 
566.             alert("文件保存路径：" + response.filepath); 
567.           } else if (response.status == "error") 
568.             alert(response.error); 
569.         }); 
570.         uploader.on('all', function(type) { 
571.           var stats; 
572.           //alert(type); 
573.           switch (type) { 
574.           case 'uploadfinished': 
575.             setstate('confirm'); 
576.             break; 
577.           case 'startupload': 
578.             setstate('uploading'); 
579.             break; 
580.           case 'stopupload': 
581.             setstate('paused'); 
582.             break; 
583.           } 
584.         }); 
585.         uploader.onerror = function(code) { 
586.           alert('eroor: ' + code); 
587.         }; 
588.         $upload.on('click', function() { 
589.           if ($(this).hasclass('disabled')) { 
590.             return false; 
591.           } 
592.           if (state === 'ready') { //点击上传按钮，进入准备状态。 
593.             uploader.upload(); //开始上传 
594.           } else if (state === 'paused') { 
595.             uploader.upload(); 
596.           } else if (state === 'uploading') { 
597.             uploader.stop(); 
598.           } 
599.         }); 
600.         $info.on('click', '.retry', function() { 
601.           uploader.retry(); 
602.         }); 
603.         $info.on('click', '.ignore', function() { 
604.           alert('todo'); 
605.         }); 
606.         $upload.addclass('state-' + state); 
607.         updatetotalprogress(); 
608.       }); 
609.     })(jquery); 
610.   </script> 

     注意：

4、controller代码

/**
   * 跳转到上传发票的页面
   * @param proname
   * @param map
   * @return
   */
  @requestmapping(value = "/upload" )
  public string invoiceupload(string proname,long id,map<string, object> map){
    map.put("proname", proname);
    projectservice.getproject(id);
    map.put("projectid", id);
    return "project/invoiceupload";
  }
  /**
   * 上传发票并保存导数据库
   * @param file
   * @param request
   * @param response
   * @return
   */
  @responsebody
  @requestmapping(value = "/news_uploder", method ={requestmethod.post,requestmethod.get}, produces = "application/json; charset=utf-8")
  public jsonobject uploder(@requestparam multipartfile[] file,long projectid,httpservletrequest request,httpservletresponse response){
    string flag=null;
    jsonobject jsonobject = new jsonobject();
    try {
      webuploaderutil webuploaderutil=new webuploaderutil();
      webuploaderutil.upload(file[0], "upload/invoice/", request);
      flag=webuploaderutil.getfilename();
      jsonobject.put("filepath", flag);
      jsonobject.put("status", "success");
    } catch (exception e) {
      e.printstacktrace();
    }
    return jsonobject;
  }
  5、工具类
  package com.softjx.util;
/**
 *project name: qdlimap
 *file name:  webuploaderutil.java
 *package name: com.ltmap.platform.cms.util
 *date:     2017年4月13日 下午6:30:45
 *copyright (c) 2017,[e-mail] all rights reserved.
*/
import java.io.file;
import java.text.simpledateformat;
import java.util.date;
import javax.servlet.http.httpservletrequest;
import org.springframework.web.multipart.multipartfile;
/**
 *title:   webuploaderutil<br/>
 *description:
 *@company:  励图高科<br/>
 *@author:  刘云生
 *@version:  v1.0
 *@since:   jdk 1.8.0_40
 *@date:   2017年4月13日 下午6:30:45 <br/>
*/
public class webuploaderutil {
  private string allowsuffix = "jpg,png,gif,jpeg";//允许文件格式
  private long allowsize = 2l;//允许文件大小
  private string filename;
  private string[] filenames;
  public string getallowsuffix() {
    return allowsuffix;
  }
  public void setallowsuffix(string allowsuffix) {
    this.allowsuffix = allowsuffix;
  }
  public long getallowsize() {
    return allowsize*1024*1024;
  }
  public void setallowsize(long allowsize) {
    this.allowsize = allowsize;
  }
  public string getfilename() {
    return filename;
  }
  public void setfilename(string filename) {
    this.filename = filename;
  }
  public string[] getfilenames() {
    return filenames;
  }
  public void setfilenames(string[] filenames) {
    this.filenames = filenames;
  }
  /**
   *
   * @title:    getfilenamenew
   * @description: todo
   * @param:    @return
   * @return:   string
   * @author:   刘云生
   * @date:    2017年4月14日 上午10:17:35
   * @throws
   */
  private string getfilenamenew(){
    simpledateformat fmt = new simpledateformat("yyyymmddhhmmsssss");
    return fmt.format(new date());
  }
  /**
   *
   * @title:    uploads
   * @description: todo
   * @param:    @param files
   * @param:    @param destdir
   * @param:    @param request
   * @param:    @throws exception
   * @return:   void
   * @author:   刘云生
   * @date:    2017年4月14日 上午10:17:14
   * @throws
   */
  public void uploads(multipartfile[] files, string destdir,httpservletrequest request) throws exception {
    string path = request.getcontextpath();
    string basepath = request.getscheme()+"://"+request.getservername()+":"+request.getserverport()+path;
    try {
      filenames = new string[files.length];
      int index = 0;
      for (multipartfile file : files) {
        string suffix = file.getoriginalfilename().substring(file.getoriginalfilename().lastindexof(".")+1);
        int length = getallowsuffix().indexof(suffix);
        if(length == -1){
          throw new exception("请上传允许格式的文件");
        }
        if(file.getsize() > getallowsize()){
          throw new exception("您上传的文件大小已经超出范围");
        }
        string realpath = request.getsession().getservletcontext().getrealpath("/");
        file destfile = new file(realpath+destdir);
        if(!destfile.exists()){
          destfile.mkdirs();
        }
        string filenamenew = getfilenamenew()+"."+suffix;//
        file f = new file(destfile.getabsolutefile()+"\"+filenamenew);
        file.transferto(f);
        f.createnewfile();
        filenames[index++] =basepath+destdir+filenamenew;
      }
    } catch (exception e) {
      throw e;
    }
  }
  /**
   *
   * @title:    upload
   * @description: todo
   * @param:    @param file
   * @param:    @param destdir
   * @param:    @param request
   * @param:    @throws exception
   * @return:   void
   * @author:   刘云生
   * @date:    2017年4月14日 上午10:16:16
   * @throws
   */
  public void upload(multipartfile file, string destdir,httpservletrequest request) throws exception {
    string path = request.getcontextpath();
    //http://localhost:8088/huahang
    string basepath = request.getscheme()+"://"+request.getservername()+":"+request.getserverport()+path;
    try {
        string suffix = file.getoriginalfilename().substring(file.getoriginalfilename().lastindexof(".")+1);
        int length = getallowsuffix().indexof(suffix);
        if(length == -1){
          throw new exception("请上传允许格式的文件");
        }
        if(file.getsize() > getallowsize()){
          throw new exception("您上传的文件大小已经超出范围");
        }
        string realpath = request.getsession().getservletcontext().getrealpath("/")+"/";
        file destfile = new file(realpath+destdir);
        if(!destfile.exists()){
          destfile.mkdirs();
        }
        string filenamenew = getfilenamenew()+"."+suffix;
        file f = new file(destfile.getabsolutefile()+"/"+filenamenew);
        file.transferto(f);
        f.createnewfile();
        //包含网站的全路径http://localhost:8080/qdlimap/upload/user/20170414104142667.png
        //filename = basepath+destdir+filenamenew;
        //返回相对路径upload/user/20170414104142667.png
        filename = destdir+filenamenew;
    } catch (exception e) {
      throw e;
  }
}
}

总结

以上所述是小编给大家介绍的webuploader 实现图片批量上传功能附实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对服务器之家网站的支持！

原文链接：http://www.cnblogs.com/HawkFalcon/archive/2017/11/30/7727028.html