webuploader 實現圖片批量上傳_ZenDei技術網路在線

1、導入資源 2、JSP代碼 3、Js代碼註意： 4、controller代碼 5、工具類 ...

1、導入資源

2、JSP代碼

 1     <div class="page-container">
 2         <div class="row cl">
 3             <label class="form-label col-xs-4 col-sm-2"><span
 4                 class="c-red">*</span>項目名稱：</label>
 5             <div class="formControls col-xs-8 col-sm-9">
 6                 <input type="text" class="input-text" value="${proName }"
 7                     placeholder="" id="" name="proName" readonly="readonly">
 8             </div>
 9         </div>
10         <div class="row cl">
11             <label class="form-label col-xs-4 col-sm-2">縮略圖：</label>
12             <div class="formControls col-xs-8 col-sm-9">
13                 <div class="uploader-thum-container">
14                     <div id="fileList" class="uploader-list"></div>
15                     <div id="filePicker">選擇圖片</div>
16                     <button id="btn-star"
17                         class="btn btn-default btn-uploadstar radius ml-10">開始上傳</button>
18                 </div>
19             </div>
20         </div>
21         <div class="row cl">
22             <label class="form-label col-xs-4 col-sm-2"><span
23                 class="c-red">*</span>項目發票上傳：</label>
24             <div class="formControls col-xs-8 col-sm-9">
25                 <div class="uploader-list-container">
26                     <div class="queueList">
27                         <div id="dndArea" class="placeholder">
28                             <div id="filePicker-2"></div>
29                             <p>或將照片拖到這裡，單次最多可選300張</p>
30                         </div>
31                     </div>
32                     <div class="statusBar" style="display:none;">
33                         <div class="progress">
34                             <span class="text">0%</span> <span class="percentage"></span>
35                         </div>
36                         <div class="info"></div>
37                         <div class="btns">
38                             <div id="filePicker2"></div>
39                             <div class="uploadBtn">開始上傳</div>
40                         </div>
41                     </div>
42                 </div>
43             </div>
44         </div>
45         <div class="row cl">
46             <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
47                 <button
48                     onClick="article_add('','invoiceVo/save?&projectId=${projectId}&invoiceScan=','10001');"
49                     class="btn btn-primary radius" type="button">
50                     <i class="Hui-iconfont">&#xe632;</i> &nbsp;&nbsp;保存&nbsp;&nbsp;
51                 </button>
52             </div>
53         </div>
54     </div>

3、Js代碼

  1 <script type="text/javascript">
  2     var  imagePath=null; 
  3     
  4         function article_save() {
  5             alert("刷新父級的時候會自動關閉彈層。");
  6             window.parent.location.reload();
  7         }
  8 
  9         /*項目發票-添加*/
 10         function article_add(title, url, w, h) {
 11         if(imagePath){
 12             var index = layer.open({
 13                 type : 2,
 14                 title : title,
 15                 content : url+imagePath
 16             });
 17             layer.full(index);
 18         }else{alert("沒有上傳圖片，請先上傳圖片");}
 19         }
 20         
 21         $(function() {
 22             $('.skin-minimal input').iCheck({
 23                 checkboxClass : 'icheckbox-blue',
 24                 radioClass : 'iradio-blue',
 25                 increaseArea : '20%'
 26             });
 27 
 28             $list = $("#fileList"), $btn = $("#btn-star"), state = "pending",
 29                     uploader;
 30 
 31             var uploader = WebUploader.create({
 32                 auto : true,
 33                 swf : 'lib/webuploader/0.1.5/Uploader.swf',// swf文件路徑
 34 
 35                 // 文件接收服務端。
 36                 server : 'lib/webuploader/0.1.5/server/fileupload.php', // 文件接收服務端。
 37 
 38                 // 選擇文件的按鈕。可選。
 39                 // 內部根據當前運行是創建，可能是input元素，也可能是flash.
 40                 pick : '#filePicker',
 41 
 42                 // 不壓縮image, 預設如果是jpeg，文件上傳前會壓縮一把再上傳！
 43                 resize : false,
 44                 // 只允許選擇圖片文件。
 45                 accept : {
 46                     title : 'Images',
 47                     extensions : 'gif,jpg,jpeg,bmp,png',
 48                     mimeTypes : 'image/*'
 49                 }
 50             });
 51             // 當有文件被添加進隊列的時候
 52             uploader
 53                     .on(
 54                             'fileQueued',
 55                             function(file) {
 56                                 var $li = $('<div id="' + file.id + '" class="item">'
 57                                         + '<div class="pic-box"><img></div>'
 58                                         + '<div class="info">'
 59                                         + file.name
 60                                         + '</div>'
 61                                         + '<p class="state">等待上傳...</p>'
 62                                         + '</div>'), $img = $li.find('img');
 63                                 $list.append($li);
 64 
 65                                 // 創建縮略圖
 66                                 // 如果為非圖片文件，可以不用調用此方法。
 67                                 // thumbnailWidth x thumbnailHeight 為 100 x 100
 68                                 uploader.makeThumb(file, function(error, src) {
 69                                     if (error) {
 70                                         $img.replaceWith('<span>不能預覽</span>');
 71                                         return;
 72                                     }
 73 
 74                                     $img.attr('src', src);
 75                                 }, thumbnailWidth, thumbnailHeight);
 76                             });
 77             // 文件上傳過程中創建進度條實時顯示。
 78             uploader
 79                     .on(
 80                             'uploadProgress',
 81                             function(file, percentage) {
 82                                 var $li = $('#' + file.id), $percent = $li
 83                                         .find('.progress-box .sr-only');
 84 
 85                                 // 避免重覆創建
 86                                 if (!$percent.length) {
 87                                     $percent = $(
 88                                             '<div class="progress-box"><span class="progress-bar radius"><span class="sr-only" style="width:0%"></span></span></div>')
 89                                             .appendTo($li).find('.sr-only');
 90                                 }
 91                                 $li.find(".state").text("上傳中");
 92                                 $percent.css('width', percentage * 100 + '%');
 93                             });
 94 
 95             // 文件上傳成功，給item添加成功class, 用樣式標記上傳成功。
 96             uploader.on('uploadSuccess', function(file) {
 97                 $('#' + file.id).addClass('upload-state-success')
 98                         .find(".state").text("已上傳");
 99             });
100 
101             // 文件上傳失敗，顯示上傳出錯。
102             uploader.on('uploadError', function(file) {
103                 $('#' + file.id).addClass('upload-state-error').find(".state")
104                         .text("上傳出錯");
105             });
106 
107             // 完成上傳完了，成功或者失敗，先刪除進度條。
108             uploader.on('uploadComplete', function(file) {
109                 $('#' + file.id).find('.progress-box').fadeOut();
110             });
111             uploader.on('all', function(type) {
112                 if (type === 'startUpload') {
113                     state = 'uploading';
114                 } else if (type === 'stopUpload') {
115                     state = 'paused';
116                 } else if (type === 'uploadFinished') {
117                     state = 'done';
118                 }
119 
120                 if (state === 'uploading') {
121                     $btn.text('暫停上傳');
122                 } else {
123                     $btn.text('開始上傳');
124                 }
125             });
126 
127             $btn.on('click', function() {
128                 if (state === 'uploading') {
129                     uploader.stop();
130                 } else {
131                     uploader.upload();
132                 }
133             });
134 
135         });
136 
137         (function($) {
138             // 當domReady的時候開始初始化
139             $(function() {
140                 var $wrap = $('.uploader-list-container'),
141 
142                 // 圖片容器
143                 $queue = $('<ul class="filelist"></ul>').appendTo(
144                         $wrap.find('.queueList')),
145 
146                 // 狀態欄，包括進度和控制按鈕
147                 $statusBar = $wrap.find('.statusBar'),
148 
149                 // 文件總體選擇信息。
150                 $info = $statusBar.find('.info'),
151 
152                 // 上傳按鈕
153                 $upload = $wrap.find('.uploadBtn'),
154 
155                 // 沒選擇文件之前的內容。
156                 $placeHolder = $wrap.find('.placeholder'),
157 
158                 $progress = $statusBar.find('.progress').hide(),
159 
160                 // 添加的文件數量
161                 fileCount = 0,
162 
163                 // 添加的文件總大小
164                 fileSize = 0,
165 
166                 // 優化retina, 在retina下這個值是2
167                 ratio = window.devicePixelRatio || 1,
168 
169                 // 縮略圖大小
170                 thumbnailWidth = 110 * ratio, thumbnailHeight = 110 * ratio,
171 
172                 // 可能有pedding, ready, uploading, confi