webuploader+springMvc+JSP 多圖上傳實現
阿新 • • 發佈:2019-01-31
<span style="font-family: Arial, Helvetica, sans-serif;"><div class="floor-popAd clearfix"></span>
<span class="span-popLeft"><span class="s-red">*</span>圖片:</span> <div class="fl"> <div class="s-lightGray posra clearfix"> <div id="filePicker" class="fl">本地上傳</div> <p class="fl" style="line-height:30px;">圖片支援JPG,GIF格式,不超過2M</p> </div> <div class=" clearfix uploader-list" id="fileList"> </div> </div> </div>
<pre name="code" class="javascript"> var $list = $("#fileList"); // 初始化Web Uploader var uploader = WebUploader.create({ // 設定檔案上傳域的name fileVal:"fileupload", // 不壓縮image resize: false, // 選完檔案後,是否自動上傳。 auto: true, //驗證檔案總數量, 超出則不允許加入佇列 fileNumLimit:3, //驗證檔案總大小是否超出限制, 超出則不允許加入佇列。 //fileSizeLimit:1024, //驗證單個檔案大小是否超出限制, 超出則不允許加入佇列。 // fileSingleSizeLimit :1024, // swf檔案路徑 swf: '${ctx}/cy/js/lib/Uploader.swf', // 檔案接收服務端。 server: '${ctx}/advert/aptituImgUpload.html', // 選擇檔案的按鈕。可選。 // 內部根據當前執行是建立,可能是input元素,也可能是flash. pick: '#filePicker', // 只允許選擇圖片檔案。 accept: { title: 'Images', extensions: 'gif,jpg,jpeg,bmp,png', mimeTypes: 'image/*' } }); // 當有檔案新增進來的時候 uploader.on( 'fileQueued', function( file ) { var $li = $('<div id="' + file.id + '" class="file-item thumbnail">'+'<input type="hidden" name="adImageUrl" id="adImageUrl' + file.id + '"/>' +'<img>' +'<div class="info">' + file.name + '</div>' +'<div class="remove-this">×</div>' +'</div>'); var $img = $li.find('img'); // $list為容器jQuery例項 $list.append( $li ); // 建立縮圖 // 如果為非圖片檔案,可以不用呼叫此方法。 // thumbnailWidth x thumbnailHeight 為 100 x 100 uploader.makeThumb( file, function( error, src ) { if ( error ) { $img.replaceWith('<span>不能預覽</span>'); return; } $img.attr( 'src', src ); }, 100, 100 ); // 刪除圖片 $list.off("click.removeFile"); $list.on("click.removeFile",'.remove-this',function(ev){ ev.preventDefault(); uploader.removeFile(file); $(this).parent().remove(); }); }); // 檔案上傳過程中建立進度條實時顯示。 uploader.on( 'uploadProgress', function( file, percentage ) { var $li = $( '#'+file.id ), $percent = $li.find('.progress span'); // 避免重複建立 if ( !$percent.length ) { $percent = $('<p class="progress"><span></span></p>') .appendTo( $li ) .find('span'); } $percent.css( 'width', percentage * 100 + '%' ); }); // 檔案上傳成功,給item新增成功class, 用樣式標記上傳成功。 uploader.on( 'uploadSuccess', function( file,obj ) { $( '#'+file.id ).addClass('upload-state-done'); $( '#'+file.id ).append(); if(obj.code==1){ $("#adImageUrl"+file.id).val(obj.msg);//儲存服務端返回圖片地址 } }); //當所有檔案上傳結束時觸發。 根據文字框ID刪除父級容器。 uploader.on( 'uploadFinished', function( file ) { var m = document.getElementsByName("adImageUrl"); if(m.length > 3){ var obj = m[3]; $( '#'+obj.id ).parent().remove(); } }); // 檔案上傳失敗,顯示上傳出錯。 uploader.on( 'uploadError', function( file ) { var $li = $( '#'+file.id ), $error = $li.find('div.error'); // 避免重複建立 if ( !$error.length ) { $error = $('<div class="error"></div>').appendTo( $li ); } $error.text('上傳失敗'); }); // 完成上傳完了,成功或者失敗,先刪除進度條。 uploader.on( 'uploadComplete', function( file ) { $( '#'+file.id ).find('.progress').remove(); }); //執行刪除方法 $list.on("click", ".remove-this",function(){ $(this).parent().remove(); }); /** * 初始化圖片 */ function initImageView(obj){ var str=''; for(var i=0;i<obj.length;i++){ str += '<div id="previewImage_' + i + '" class="file-item thumbnail">'+'<input type="hidden" name="adImageUrl" value='+ obj[i] +' id="adImageUrl' + i + '"/>' +'<img src="http://qa-pic.xebest.com'+obj[i]+'" width="100" height="100">' +'<div class="info"></div>' +'<div class="remove-this">×</div>' +'</div>'; } $list.html( str ); // $list為容器jQuery例項 } /** * 彈出對話方塊方法 * @param hid * @param ad */ function myMask() { var _adImageUrl = $(obj).attr("adImageUrl");//圖片地址 var arr = _adImageUrl.split(","); if(arr.length>0 && arr[0]!=""){ initImageView(arr);//初始化圖片 } }