webuploader 实现图片批量上传
生活随笔
收集整理的這篇文章主要介紹了
webuploader 实现图片批量上传
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
1、導(dǎo)入資源
?
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>項(xiàng)目名稱：</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">開(kāi)始上傳</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>項(xiàng)目發(fā)票上傳：</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>或?qū)⒄掌系竭@里，單次最多可選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">開(kāi)始上傳</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"></i> 保存 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("刷新父級(jí)的時(shí)候會(huì)自動(dòng)關(guān)閉彈層。"); 6 window.parent.location.reload(); 7 } 8 9 /*項(xiàng)目發(fā)票-添加*/ 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("沒(méi)有上傳圖片，請(qǐng)先上傳圖片");} 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 // 文件接收服務(wù)端。 36 server : 'lib/webuploader/0.1.5/server/fileupload.php', // 文件接收服務(wù)端。 37 38 // 選擇文件的按鈕。可選。 39 // 內(nèi)部根據(jù)當(dāng)前運(yùn)行是創(chuàng)建，可能是input元素，也可能是flash. 40 pick : '#filePicker', 41 42 // 不壓縮image, 默認(rèn)如果是jpeg，文件上傳前會(huì)壓縮一把再上傳！ 43 resize : false, 44 // 只允許選擇圖片文件。 45 accept : { 46 title : 'Images', 47 extensions : 'gif,jpg,jpeg,bmp,png', 48 mimeTypes : 'image/*' 49 } 50 }); 51 // 當(dāng)有文件被添加進(jìn)隊(duì)列的時(shí)候 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 // 創(chuàng)建縮略圖 66 // 如果為非圖片文件，可以不用調(diào)用此方法。 67 // thumbnailWidth x thumbnailHeight 為 100 x 100 68 uploader.makeThumb(file, function(error, src) { 69 if (error) { 70 $img.replaceWith('<span>不能預(yù)覽</span>'); 71 return; 72 } 73 74 $img.attr('src', src); 75 }, thumbnailWidth, thumbnailHeight); 76 }); 77 // 文件上傳過(guò)程中創(chuàng)建進(jìn)度條實(shí)時(shí)顯示。 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 // 避免重復(fù)創(chuàng)建 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, 用樣式標(biāo)記上傳成功。 96 uploader.on('uploadSuccess', function(file) { 97 $('#' + file.id).addClass('upload-state-success') 98 .find(".state").text("已上傳"); 99 }); 100 101 // 文件上傳失敗，顯示上傳出錯(cuò)。 102 uploader.on('uploadError', function(file) { 103 $('#' + file.id).addClass('upload-state-error').find(".state") 104 .text("上傳出錯(cuò)"); 105 }); 106 107 // 完成上傳完了，成功或者失敗，先刪除進(jìn)度條。 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('開(kāi)始上傳'); 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 // 當(dāng)domReady的時(shí)候開(kāi)始初始化 139 $(function() { 140 var $wrap = $('.uploader-list-container'), 141 142 // 圖片容器 143 $queue = $('<ul class="filelist"></ul>').appendTo( 144 $wrap.find('.queueList')), 145 146 // 狀態(tài)欄，包括進(jìn)度和控制按鈕 147 $statusBar = $wrap.find('.statusBar'), 148 149 // 文件總體選擇信息。 150 $info = $statusBar.find('.info'), 151 152 // 上傳按鈕 153 $upload = $wrap.find('.uploadBtn'), 154 155 // 沒(méi)選擇文件之前的內(nèi)容。 156 $placeHolder = $wrap.find('.placeholder'), 157 158 $progress = $statusBar.find('.progress').hide(), 159 160 // 添加的文件數(shù)量 161 fileCount = 0, 162 163 // 添加的文件總大小 164 fileSize = 0, 165 166 // 優(yōu)化retina, 在retina下這個(gè)值是2 167 ratio = window.devicePixelRatio || 1, 168 169 // 縮略圖大小 170 thumbnailWidth = 110 * ratio, thumbnailHeight = 110 * ratio, 171 172 // 可能有pedding, ready, uploading, confirm, done. 173 state = 'pedding', 174 175 // 所有文件的進(jìn)度信息，key為file id 176 percentages = {}, 177 // 判斷瀏覽器是否支持圖片的base64 178 isSupportBase64 = (function() { 179 var data = new Image(); 180 var support = true; 181 data.onload = data.onerror = function() { 182 if (this.width != 1 || this.height != 1) { 183 support = false; 184 } 185 } 186 data.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="; 187 return support; 188 })(), 189 190 // 檢測(cè)是否已經(jīng)安裝flash，檢測(cè)flash的版本 191 flashVersion = (function() { 192 var version; 193 194 try { 195 version = navigator.plugins['Shockwave Flash']; 196 version = version.description; 197 } catch (ex) { 198 try { 199 version = new ActiveXObject( 200 'ShockwaveFlash.ShockwaveFlash') 201 .GetVariable('$version'); 202 } catch (ex2) { 203 version = '0.0'; 204 } 205 } 206 version = version.match(/\d+/g); 207 return parseFloat(version[0] + '.' + version[1], 10); 208 })(), 209 210 supportTransition = (function() { 211 var s = document.createElement('p').style, r = 'transition' in s 212 || 'WebkitTransition' in s 213 || 'MozTransition' in s 214 || 'msTransition' in s || 'OTransition' in s; 215 s = null; 216 return r; 217 })(), 218 219 // WebUploader實(shí)例 220 uploader; 221 222 if (!WebUploader.Uploader.support('flash') 223 && WebUploader.browser.ie) { 224 225 // flash 安裝了但是版本過(guò)低。 226 if (flashVersion) { 227 (function(container) { 228 window['expressinstallcallback'] = function(state) { 229 switch (state) { 230 case 'Download.Cancelled': 231 alert('您取消了更新！') 232 break; 233 234 case 'Download.Failed': 235 alert('安裝失敗') 236 break; 237 238 default: 239 alert('安裝已成功，請(qǐng)刷新！'); 240 break; 241 } 242 delete window['expressinstallcallback']; 243 }; 244 245 var swf = 'expressInstall.swf'; 246 // insert flash object 247 var html = '<object type="application/' 248 + 'x-shockwave-flash" data="' + swf + '" '; 249 250 if (WebUploader.browser.ie) { 251 html += 'classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" '; 252 } 253 254 html += 'width="100%" height="100%" style="outline:0">' 255 + '<param name="movie" value="' + swf + '" />' 256 + '<param name="wmode" value="transparent" />' 257 + '<param name="allowscriptaccess" value="always" />' 258 + '</object>'; 259 260 container.html(html); 261 262 })($wrap); 263 264 // 壓根就沒(méi)有安轉(zhuǎn)。 265 } else { 266 $wrap 267 .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>'); 268 } 269 270 return; 271 } else if (!WebUploader.Uploader.support()) { 272 alert('Web Uploader 不支持您的瀏覽器！'); 273 return; 274 } 275 276 // 實(shí)例化 277 uploader = WebUploader.create({ 278 pick : { 279 id : '#filePicker-2', 280 label : '點(diǎn)擊選擇圖片' 281 }, 282 formData : { 283 uid : 123 284 }, 285 dnd : '#dndArea', 286 paste : '#uploader', 287 swf : 'lib/webuploader/0.1.5/Uploader.swf', 288 chunked : false, 289 chunkSize : 512 * 1024, 290 server : 'invoiceVo/news_uploder?&projectId=${projectId}', 291 // runtimeOrder: 'flash', 292 293 // accept: { 294 // title: 'Images', 295 // extensions: 'gif,jpg,jpeg,bmp,png', 296 // mimeTypes: 'image/*' 297 // }, 298 299 // 禁掉全局的拖拽功能。這樣不會(huì)出現(xiàn)圖片拖進(jìn)頁(yè)面的時(shí)候，把圖片打開(kāi)。 300 disableGlobalDnd : true, 301 fileNumLimit : 300, 302 fileSizeLimit : 200 * 1024 * 1024, // 200 M 303 fileSingleSizeLimit : 50 * 1024 * 1024 304 // 50 M 305 }); 306 307 // 拖拽時(shí)不接受 js, txt 文件。 308 uploader.on('dndAccept', function(items) { 309 var denied = false, len = items.length, i = 0, 310 // 修改js類(lèi)型 311 unAllowed = 'text/plain;application/javascript '; 312 313 for (; i < len; i++) { 314 // 如果在列表里面 315 if (~unAllowed.indexOf(items[i].type)) { 316 denied = true; 317 break; 318 } 319 } 320 321 return !denied; 322 }); 323 324 uploader.on('dialogOpen', function() { 325 console.log('here'); 326 }); 327 328 // uploader.on('filesQueued', function() { 329 // uploader.sort(function( a, b ) { 330 // if ( a.name < b.name ) 331 // return -1; 332 // if ( a.name > b.name ) 333 // return 1; 334 // return 0; 335 // }); 336 // }); 337 338 // 添加“添加文件”的按鈕， 339 /* uploader.addButton({ 340 id : '#filePicker2', 341 label : '繼續(xù)添加' 342 }); */ 343 344 uploader.on('ready', function() { 345 window.uploader = uploader; 346 }); 347 348 // 當(dāng)有文件添加進(jìn)來(lái)時(shí)執(zhí)行，負(fù)責(zé)view的創(chuàng)建 349 function addFile(file) { 350 var $li = $('<li id="' + file.id + '">' 351 + '<p class="title">' + file.name + '</p>' 352 + '<p class="imgWrap"></p>' 353 + '<p class="progress"><span></span></p>' + '</li>'), 354 355 $btns = $( 356 '<div class="file-panel">' 357 + '<span class="cancel">刪除</span>' 358 + '<span class="rotateRight">向右旋轉(zhuǎn)</span>' 359 + '<span class="rotateLeft">向左旋轉(zhuǎn)</span></div>') 360 .appendTo($li), $prgress = $li 361 .find('p.progress span'), $wrap = $li 362 .find('p.imgWrap'), $info = $('<p class="error"></p>'), 363 364 showError = function(code) { 365 switch (code) { 366 case 'exceed_size': 367 text = '文件大小超出'; 368 break; 369 370 case 'interrupt': 371 text = '上傳暫停'; 372 break; 373 374 default: 375 text = '上傳失敗，請(qǐng)重試'; 376 break; 377 } 378 379 $info.text(text).appendTo($li); 380 }; 381 382 if (file.getStatus() === 'invalid') { 383 showError(file.statusText); 384 } else { 385 // @todo lazyload 386 $wrap.text('預(yù)覽中'); 387 uploader 388 .makeThumb( 389 file, 390 function(error, src) { 391 var img; 392 393 if (error) { 394 $wrap.text('不能預(yù)覽'); 395 return; 396 } 397 398 if (isSupportBase64) { 399 img = $('<img src="'+src+'">'); 400 $wrap.empty().append(img); 401 } else { 402 $ 403 .ajax( 404 'lib/webuploader/0.1.5/server/preview.php', 405 { 406 method : 'POST', 407 data : src, 408 dataType : 'json' 409 }) 410 .done( 411 function( 412 response) { 413 if (response.result) { 414 img = $('<img src="'+response.result+'">'); 415 $wrap 416 .empty() 417 .append( 418 img); 419 } else { 420 $wrap 421 .text("預(yù)覽出錯(cuò)"); 422 } 423 }); 424 } 425 }, thumbnailWidth, thumbnailHeight); 426 427 percentages[file.id] = [ file.size, 0 ]; 428 file.rotation = 0; 429 } 430 431 file.on('statuschange', function(cur, prev) { 432 if (prev === 'progress') { 433 $prgress.hide().width(0); 434 } else if (prev === 'queued') { 435 $li.off('mouseenter mouseleave'); 436 $btns.remove(); 437 } 438 439 // 成功 440 if (cur === 'error' || cur === 'invalid') { 441 console.log(file.statusText); 442 showError(file.statusText); 443 percentages[file.id][1] = 1; 444 } else if (cur === 'interrupt') { 445 showError('interrupt'); 446 } else if (cur === 'queued') { 447 percentages[file.id][1] = 0; 448 } else if (cur === 'progress') { 449 $info.remove(); 450 $prgress.css('display', 'block'); 451 } else if (cur === 'complete') { 452 $li.append('<span class="success"></span>'); 453 } 454 455 $li.removeClass('state-' + prev).addClass( 456 'state-' + cur); 457 }); 458 459 $li.on('mouseenter', function() { 460 $btns.stop().animate({ 461 height : 30 462 }); 463 }); 464 465 $li.on('mouseleave', function() { 466 $btns.stop().animate({ 467 height : 0 468 }); 469 }); 470 471 $btns 472 .on( 473 'click', 474 'span', 475 function() { 476 var index = $(this).index(), deg; 477 478 switch (index) { 479 case 0: 480 uploader.removeFile(file); 481 return; 482 483 case 1: 484 file.rotation += 90; 485 break; 486 487 case 2: 488 file.rotation -= 90; 489 break; 490 } 491 492 if (supportTransition) { 493 deg = 'rotate(' + file.rotation 494 + 'deg)'; 495 $wrap.css({ 496 '-webkit-transform' : deg, 497 '-mos-transform' : deg, 498 '-o-transform' : deg, 499 'transform' : deg 500 }); 501 } else { 502 $wrap 503 .css( 504 'filter', 505 'progid:DXImageTransform.Microsoft.BasicImage(rotation=' 506 + (~~((file.rotation / 90) % 4 + 4) % 4) 507 + ')'); 508 509 } 510 511 }); 512 513 $li.appendTo($queue); 514 } 515 516 // 負(fù)責(zé)view的銷(xiāo)毀 517 function removeFile(file) { 518 var $li = $('#' + file.id); 519 520 delete percentages[file.id]; 521 updateTotalProgress(); 522 $li.off().find('.file-panel').off().end().remove(); 523 } 524 525 function updateTotalProgress() { 526 var loaded = 0, total = 0, spans = $progress.children(), percent; 527 528 $.each(percentages, function(k, v) { 529 total += v[0]; 530 loaded += v[0] * v[1]; 531 }); 532 533 percent = total ? loaded / total : 0; 534 535 spans.eq(0).text(Math.round(percent * 100) + '%'); 536 spans.eq(1).css('width', Math.round(percent * 100) + '%'); 537 updateStatus(); 538 } 539 540 function updateStatus() { 541 var text = '', stats; 542 543 if (state === 'ready') { 544 text = '選中' + fileCount + '張圖片，共' 545 + WebUploader.formatSize(fileSize) + '。'; 546 } else if (state === 'confirm') { 547 stats = uploader.getStats(); 548 if (stats.uploadFailNum) { 549 text = '已成功上傳' 550 + stats.successNum 551 + '張照片至XX相冊(cè)，' 552 + stats.uploadFailNum 553 + '張照片上傳失敗，<a class="retry" href="#">重新上傳</a>失敗圖片或<a class="ignore" href="#">忽略</a>' 554 } 555 556 } else { 557 stats = uploader.getStats(); 558 text = '共' + fileCount + '張（' 559 + WebUploader.formatSize(fileSize) + '），已上傳' 560 + stats.successNum + '張'; 561 562 if (stats.uploadFailNum) { 563 text += '，失敗' + stats.uploadFailNum + '張'; 564 } 565 } 566 567 $info.html(text); 568 } 569 570 function setState(val) { 571 var file, stats; 572 573 if (val === state) { 574 return; 575 } 576 577 $upload.removeClass('state-' + state); 578 $upload.addClass('state-' + val); 579 state = val; 580 581 switch (state) { 582 case 'pedding': 583 $placeHolder.removeClass('element-invisible'); 584 $queue.hide(); 585 $statusBar.addClass('element-invisible'); 586 uploader.refresh(); 587 break; 588 589 case 'ready': 590 $placeHolder.addClass('element-invisible'); 591 $('#filePicker2').removeClass('element-invisible'); 592 $queue.show(); 593 $statusBar.removeClass('element-invisible'); 594 uploader.refresh(); 595 break; 596 597 case 'uploading': 598 $('#filePicker2').addClass('element-invisible'); 599 $progress.show(); 600 $upload.text('暫停上傳'); 601 break; 602 603 case 'paused': 604 $progress.show(); 605 $upload.text('繼續(xù)上傳'); 606 break; 607 608 case 'confirm': 609 $progress.hide(); 610 $('#filePicker2').removeClass('element-invisible'); 611 $upload.text('開(kāi)始上傳'); 612 613 stats = uploader.getStats(); 614 if (stats.successNum && !stats.uploadFailNum) { 615 setState('finish'); 616 return; 617 } 618 break; 619 case 'finish': 620 stats = uploader.getStats(); 621 if (stats.successNum) { 622 alert('上傳成功'); 623 624 } else { 625 // 沒(méi)有成功的圖片，重設(shè) 626 state = 'done'; 627 location.reload(); 628 } 629 break; 630 } 631 632 updateStatus(); 633 } 634 635 uploader.onUploadProgress = function(file, percentage) { 636 var $li = $('#' + file.id), $percent = $li 637 .find('.progress span'); 638 639 $percent.css('width', percentage * 100 + '%'); 640 percentages[file.id][1] = percentage; 641 updateTotalProgress(); 642 }; 643 644 uploader.onFileQueued = function(file) { 645 fileCount++; 646 fileSize += file.size; 647 648 if (fileCount === 1) { 649 $placeHolder.addClass('element-invisible'); 650 $statusBar.show(); 651 } 652 653 addFile(file); 654 setState('ready'); 655 updateTotalProgress(); 656 }; 657 658 uploader.onFileDequeued = function(file) { 659 fileCount--; 660 fileSize -= file.size; 661 662 if (!fileCount) { 663 setState('pedding'); 664 } 665 666 removeFile(file); 667 updateTotalProgress(); 668 669 }; 670 671 /*獲取服務(wù)器返回的數(shù)據(jù)*/ 672 uploader.on('uploadSuccess', function(file, response) { 673 alert(response.status); 674 if (response.status == "success") { 675 imagePath =response.filePath; 676 alert("文件保存路徑：" + response.filePath); 677 } else if (response.status == "error") 678 alert(response.error); 679 }); 680 681 uploader.on('all', function(type) { 682 var stats; 683 //alert(type); 684 switch (type) { 685 case 'uploadFinished': 686 687 setState('confirm'); 688 break; 689 690 case 'startUpload': 691 setState('uploading'); 692 break; 693 694 case 'stopUpload': 695 setState('paused'); 696 break; 697 698 } 699 }); 700 701 uploader.onError = function(code) { 702 alert('Eroor: ' + code); 703 }; 704 705 $upload.on('click', function() { 706 if ($(this).hasClass('disabled')) { 707 return false; 708 } 709 710 if (state === 'ready') { //點(diǎn)擊上傳按鈕，進(jìn)入準(zhǔn)備狀態(tài)。 711 uploader.upload(); //開(kāi)始上傳 712 } else if (state === 'paused') { 713 uploader.upload(); 714 } else if (state === 'uploading') { 715 uploader.stop(); 716 } 717 }); 718 719 $info.on('click', '.retry', function() { 720 uploader.retry(); 721 }); 722 723 $info.on('click', '.ignore', function() { 724 alert('todo'); 725 }); 726 727 $upload.addClass('state-' + state); 728 updateTotalProgress(); 729 }); 730 731 })(jQuery); 732 </script>注意：
?
?
?
?
4、controller代碼
1 2 /** 3 * 跳轉(zhuǎn)到上傳發(fā)票的頁(yè)面 4 * @param proName 5 * @param map 6 * @return 7 */ 8 @RequestMapping(value = "/upload" ) 9 public String invoiceUpload(String proName,Long id,Map<String, Object> map){ 10 map.put("proName", proName); 11 projectService.getProject(id); 12 map.put("projectId", id); 13 return "project/invoiceUpload"; 14 } 15 16 17 18 /** 19 * 上傳發(fā)票并保存導(dǎo)數(shù)據(jù)庫(kù) 20 * @param file 21 * @param request 22 * @param response 23 * @return 24 */ 25 @ResponseBody 26 @RequestMapping(value = "/news_uploder", method ={RequestMethod.POST,RequestMethod.GET}, produces = "application/json; charset=utf-8") 27 public JSONObject uploder(@RequestParam MultipartFile[] file,Long projectId,HttpServletRequest request,HttpServletResponse response){ 28 String flag=null; 29 30 JSONObject jsonObject = new JSONObject(); 31 try { 32 WebuploaderUtil webuploaderUtil=new WebuploaderUtil(); 33 webuploaderUtil.upload(file[0], "upload/invoice/", request); 34 flag=webuploaderUtil.getFileName(); 35 jsonObject.put("filePath", flag); 36 jsonObject.put("status", "success"); 37 38 } catch (Exception e) { 39 e.printStackTrace(); 40 } 41 42 return jsonObject; 43 } 44 45?
5、工具類(lèi)
1 package com.softjx.util; 2 3 /** 4 *Project Name: QDLIMAP 5 *File Name: WebuploaderUtil.java 6 *Package Name: com.ltmap.platform.cms.util 7 *Date: 2017年4月13日 下午6:30:45 8 *Copyright (c) 2017,578888218@qq.com All Rights Reserved. 9 */ 10 11 12 import java.io.File; 13 import java.text.SimpleDateFormat; 14 import java.util.Date; 15 16 import javax.servlet.http.HttpServletRequest; 17 18 import org.springframework.web.multipart.MultipartFile; 19 20 /** 21 *Title: WebuploaderUtil<br/> 22 *Description: 23 *@Company: 勵(lì)圖高科<br/> 24 *@author: 劉云生 25 *@version: v1.0 26 *@since: JDK 1.8.0_40 27 *@Date: 2017年4月13日 下午6:30:45 <br/> 28 */ 29 public class WebuploaderUtil { 30 private String allowSuffix = "jpg,png,gif,jpeg";//允許文件格式 31 private long allowSize = 2L;//允許文件大小 32 private String fileName; 33 private String[] fileNames; 34 35 public String getAllowSuffix() { 36 return allowSuffix; 37 } 38 39 public void setAllowSuffix(String allowSuffix) { 40 this.allowSuffix = allowSuffix; 41 } 42 43 public long getAllowSize() { 44 return allowSize*1024*1024; 45 } 46 47 public void setAllowSize(long allowSize) { 48 this.allowSize = allowSize; 49 } 50 51 public String getFileName() { 52 return fileName; 53 } 54 55 public void setFileName(String fileName) { 56 this.fileName = fileName; 57 } 58 59 public String[] getFileNames() { 60 return fileNames; 61 } 62 63 public void setFileNames(String[] fileNames) { 64 this.fileNames = fileNames; 65 } 66 67 68 69 /** 70 * 71 * @Title: getFileNameNew 72 * @Description: TODO 73 * @param: @return 74 * @return: String 75 * @author: 劉云生 76 * @Date: 2017年4月14日 上午10:17:35 77 * @throws 78 */ 79 private String getFileNameNew(){ 80 SimpleDateFormat fmt = new SimpleDateFormat("yyyyMMddHHmmssSSS"); 81 return fmt.format(new Date()); 82 } 83 84 85 /** 86 * 87 * @Title: uploads 88 * @Description: TODO 89 * @param: @param files 90 * @param: @param destDir 91 * @param: @param request 92 * @param: @throws Exception 93 * @return: void 94 * @author: 劉云生 95 * @Date: 2017年4月14日 上午10:17:14 96 * @throws 97 */ 98 public void uploads(MultipartFile[] files, String destDir,HttpServletRequest request) throws Exception { 99 String path = request.getContextPath(); 100 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path; 101 try { 102 fileNames = new String[files.length]; 103 int index = 0; 104 for (MultipartFile file : files) { 105 String suffix = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".")+1); 106 int length = getAllowSuffix().indexOf(suffix); 107 if(length == -1){ 108 throw new Exception("請(qǐng)上傳允許格式的文件"); 109 } 110 if(file.getSize() > getAllowSize()){ 111 throw new Exception("您上傳的文件大小已經(jīng)超出范圍"); 112 } 113 String realPath = request.getSession().getServletContext().getRealPath("/"); 114 File destFile = new File(realPath+destDir); 115 if(!destFile.exists()){ 116 destFile.mkdirs(); 117 } 118 String fileNameNew = getFileNameNew()+"."+suffix;// 119 File f = new File(destFile.getAbsoluteFile()+"\\"+fileNameNew); 120 file.transferTo(f); 121 f.createNewFile(); 122 fileNames[index++] =basePath+destDir+fileNameNew; 123 } 124 } catch (Exception e) { 125 throw e; 126 } 127 } 128 129 130 /** 131 * 132 * @Title: upload 133 * @Description: TODO 134 * @param: @param file 135 * @param: @param destDir 136 * @param: @param request 137 * @param: @throws Exception 138 * @return: void 139 * @author: 劉云生 140 * @Date: 2017年4月14日 上午10:16:16 141 * @throws 142 */ 143 public void upload(MultipartFile file, String destDir,HttpServletRequest request) throws Exception { 144 String path = request.getContextPath(); 145 //http://localhost:8088/huahang 146 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path; 147 try { 148 String suffix = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".")+1); 149 int length = getAllowSuffix().indexOf(suffix); 150 if(length == -1){ 151 throw new Exception("請(qǐng)上傳允許格式的文件"); 152 } 153 if(file.getSize() > getAllowSize()){ 154 throw new Exception("您上傳的文件大小已經(jīng)超出范圍"); 155 } 156 157 String realPath = request.getSession().getServletContext().getRealPath("/")+"/"; 158 159 File destFile = new File(realPath+destDir); 160 if(!destFile.exists()){ 161 destFile.mkdirs(); 162 } 163 String fileNameNew = getFileNameNew()+"."+suffix; 164 File f = new File(destFile.getAbsoluteFile()+"/"+fileNameNew); 165 file.transferTo(f); 166 f.createNewFile(); 167 //包含網(wǎng)站的全路徑http://localhost:8080/QDLIMAP/upload/user/20170414104142667.png 168 //fileName = basePath+destDir+fileNameNew; 169 //返回相對(duì)路徑upload/user/20170414104142667.png 170 fileName = destDir+fileNameNew; 171 } catch (Exception e) { 172 throw e; 173 } 174 } 175 }?
轉(zhuǎn)載于:https://www.cnblogs.com/HawkFalcon/p/7727028.html
總結(jié)
以上是生活随笔為你收集整理的webuploader 实现图片批量上传的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： php序列化 与json_PHP中ser
- 下一篇： 多策略黑猩猩优化算法-附代码