1.webuploader的文件下載

鏈接：http://pan.baidu.com/s/1jIdty30 密碼：un47

2.spring的靜態(tài)資源映射

<!-- 靜態(tài)資源映射 --><mvc:resources mapping="/static/**" location="/WEB-INF/static/" /><mvc:resources mapping="/umeditor1.2.3/**" location="/umeditor1.2.3/" /><mvc:resources mapping="/webuploader-0.1.5/**" location="/webuploader-0.1.5/" /><mvc:resources mapping="/upload/**" location="/upload/" />

3.上傳文件的工具類WebuploaderUtil.JAVA

/***Project Name: QDLIMAP*File Name: WebuploaderUtil.java*Package Name: com.ltmap.platform.cms.util*Date: 2017年4月13日 下午6:30:45*Copyright (c) 2017,578888218@qq.com All Rights Reserved. */package com.ltmap.platform.cms.util;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: 勵(lì)圖高科<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("請(qǐng)上傳允許格式的文件");}if(file.getSize() > getAllowSize()){throw new Exception("您上傳的文件大小已經(jīng)超出范圍");}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();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("請(qǐng)上傳允許格式的文件");}if(file.getSize() > getAllowSize()){throw new Exception("您上傳的文件大小已經(jīng)超出范圍");}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();//包含網(wǎng)站的全路徑http://localhost:8080/QDLIMAP/upload/user/20170414104142667.png//fileName = basePath+destDir+fileNameNew;//返回相對(duì)路徑upload/user/20170414104142667.pngfileName = destDir+fileNameNew;} catch (Exception e) {throw e;} } }

4.controller層上傳函數(shù)

@RequestMapping(value = "news_uploder", method ={RequestMethod.POST,RequestMethod.GET}, produces = "application/json; charset=utf-8")@ResponseBodypublic String uploder(@RequestParam MultipartFile[] file,HttpServletRequest request,HttpServletResponse response){String flag=null;try {WebuploaderUtil webuploaderUtil=new WebuploaderUtil();webuploaderUtil.upload(file[0], "upload/news/", request);flag=webuploaderUtil.getFileName();} catch (Exception e) {e.printStackTrace();}return flag;}

5.JSP頁(yè)面

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>圖片上傳</title><link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script><script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script><link rel="stylesheet" type="text/css" href="webuploader-0.1.5/webuploader.css" /><link rel="stylesheet" type="text/css" href="webuploader-0.1.5/style.css" /><style type="text/css"></style> </head> <body><%-- <jsp:include page="./cms/index.jsp"></jsp:include>--%><%-- <%@ include file="NewFile.jsp" %> --%> <%@ include file="/WEB-INF/page/common_import/header.jsp" %><div id="wrapper" ><div id="container" class="col-sm-6"><!--頭部，相冊(cè)選擇和格式選擇--><div id="uploader"><div class="queueList"><div id="dndArea" class="placeholder"><div id="filePicker"></div><p>或?qū)⒄掌系竭@里，單次最多可選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 class="form-group col-sm-6"><label for="name" class="form-group col-sm-12">新聞首頁(yè)導(dǎo)航圖片：</label> <img id="myImg" alt="導(dǎo)航圖片" src=""style="width: 300px; height: 300px;"> <input type="text"class="form-control" id="newsImg" placeholder="新聞導(dǎo)航圖片路徑" disabledstyle="display: none;"></div></div><div class="form-group"><div class="col-sm-offset-2 col-sm-12"><button class="btn btn-default" οnclick="cms_CmsNews_submit();">提交</button><button type="submit" class="btn btn-default">取消</button><a href="jspView?jsp=cms/news/news_list" class="btn btn-default" >返回新聞列表</a></div> </div> <input type="text" id="method" value="<%=request.getAttribute("method") %>" style="display:none;"/> <input type="text" id="newsId" value="<%=request.getAttribute("newsId") %>" style="display:none;"/><script src="webuploader-0.1.5/webuploader.js"></script> <script src="webuploader-0.1.5/news_img_edit_upload.js"></script> <script type="text/javascript"> window.onload = function() { var newsId=$("#newsId").val();cms_CmsNews_selectByPrimaryKey(newsId); }; function cms_CmsNews_selectByPrimaryKey(newsId){$.ajax({url:'cms_CmsNews_selectByPrimaryKey',data:{newsId:newsId},dataType:'json',type:'post',success:function(data){var cmsNews=data;$("#newsImg").val(cmsNews.newsImg);$("#myImg").attr("src",cmsNews.newsImg);},error:function(data){alert('提交失敗');}}); } function cms_CmsNews_update(newsId){$.ajax({url:'cms_CmsNews_update',data:{newsId:newsId,newsImg:$("#newsImg").val(),},dataType:'json',type:'post',success:function(data){ alert('提交成功');},error:function(data){alert('提交失敗');}});}function cms_CmsNews_submit(){if("update"==$("#method").val()){var newsId=$("#newsId").val();cms_CmsNews_update(newsId); }else{cms_CmsNews_insert();} } </script><%@ include file="/WEB-INF/page/common_import/footer.jsp" %></body> </html>

6.news_img_edit_upload.js主要代碼

(function( $ ){// 當(dāng)domReady的時(shí)候開始初始化$(function() {var $wrap = $('#uploader'),// 圖片容器$queue = $( '<ul class="filelist"></ul>' ).appendTo( $wrap.find( '.queueList' ) ),// 狀態(tài)欄，包括進(jìn)度和控制按鈕$statusBar = $wrap.find( '.statusBar' ),// 文件總體選擇信息。$info = $statusBar.find( '.info' ),// 上傳按鈕$upload = $wrap.find( '.uploadBtn' ),// 沒選擇文件之前的內(nèi)容。$placeHolder = $wrap.find( '.placeholder' ),$progress = $statusBar.find( '.progress' ).hide(),// 添加的文件數(shù)量fileCount = 0,// 添加的文件總大小fileSize = 0,// 優(yōu)化retina, 在retina下這個(gè)值是2ratio = window.devicePixelRatio || 1,// 縮略圖大小thumbnailWidth = 110 * ratio,thumbnailHeight = 110 * ratio,// 可能有pedding, ready, uploading, confirm, done.state = 'pedding',// 所有文件的進(jìn)度信息，key為file idpercentages = {},// 判斷瀏覽器是否支持圖片的base64isSupportBase64 = ( function() {var data = new Image();var support = true;data.onload = data.onerror = function() {if( this.width != 1 || this.height != 1 ) {support = false;}}data.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";return support;} )(),// 檢測(cè)是否已經(jīng)安裝flash，檢測(cè)flash的版本flashVersion = ( function() {var version;try {version = navigator.plugins[ 'Shockwave Flash' ];version = version.description;} catch ( ex ) {try {version = new ActiveXObject('ShockwaveFlash.ShockwaveFlash').GetVariable('$version');} catch ( ex2 ) {version = '0.0';}}version = version.match( /\d+/g );return parseFloat( version[ 0 ] + '.' + version[ 1 ], 10 );} )(),supportTransition = (function(){var s = document.createElement('p').style,r = 'transition' in s ||'WebkitTransition' in s ||'MozTransition' in s ||'msTransition' in s ||'OTransition' in s;s = null;return r;})(),// WebUploader實(shí)例uploader;if ( !WebUploader.Uploader.support('flash') && WebUploader.browser.ie ) {// flash 安裝了但是版本過(guò)低。if (flashVersion) {(function(container) {window['expressinstallcallback'] = function( state ) {switch(state) {case 'Download.Cancelled':alert('您取消了更新！')break;case 'Download.Failed':alert('安裝失敗')break;default:alert('安裝已成功，請(qǐng)刷新！');break;}delete window['expressinstallcallback'];};var swf = './expressInstall.swf';// insert flash objectvar html = '<object type="application/' +'x-shockwave-flash" data="' + swf + '" ';if (WebUploader.browser.ie) {html += 'classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" ';}html += 'width="100%" height="100%" style="outline:0">' +'<param name="movie" value="' + swf + '" />' +'<param name="wmode" value="transparent" />' +'<param name="allowscriptaccess" value="always" />' +'</object>';container.html(html);})($wrap);// 壓根就沒有安轉(zhuǎn)。} else {$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>');}return;} else if (!WebUploader.Uploader.support()) {alert( 'Web Uploader 不支持您的瀏覽器！');return;}// 實(shí)例化uploader = WebUploader.create({pick: {id: '#filePicker',label: '點(diǎn)擊選擇圖片'},formData: {uid: 123},dnd: '#dndArea',paste: '#uploader',swf: '../Uploader.swf',chunked: false,chunkSize: 512 * 1024,server: 'news_uploder',//請(qǐng)求后臺(tái)的入口// runtimeOrder: 'flash',// accept: {// title: 'Images',// extensions: 'gif,jpg,jpeg,bmp,png',// mimeTypes: 'image/*'// },accept: {title: 'Images',extensions: 'gif,jpg,jpeg,bmp,png',mimeTypes: 'image/*'},// 禁掉全局的拖拽功能。這樣不會(huì)出現(xiàn)圖片拖進(jìn)頁(yè)面的時(shí)候，把圖片打開。disableGlobalDnd: true,fileNumLimit: 100,fileSizeLimit: 200 * 1024 * 1024, // 200 MfileSingleSizeLimit: 50 * 1024 * 1024 // 50 M});// 拖拽時(shí)不接受 js, txt 文件。uploader.on( 'dndAccept', function( items ) {var denied = false,len = items.length,i = 0,// 修改js類型unAllowed = 'text/plain;application/javascript ';for ( ; i < len; i++ ) {// 如果在列表里面if ( ~unAllowed.indexOf( items[ i ].type ) ) {denied = true;break;}}return !denied;});// uploader.on('filesQueued', function() {// uploader.sort(function( a, b ) {// if ( a.name < b.name )// return -1;// if ( a.name > b.name )// return 1;// return 0;// });// });// 添加“添加文件”的按鈕，uploader.addButton({id: '#filePicker2',label: '繼續(xù)添加'});uploader.on('ready', function() {window.uploader = uploader;}); //文件上傳成功返回的文件路徑uploader.on('uploadSuccess', function(file, json) { console.log(json);$("#myImg").attr("src",json);$("#newsImg").val(json);}); // 當(dāng)有文件添加進(jìn)來(lái)時(shí)執(zhí)行，負(fù)責(zé)view的創(chuàng)建function addFile( file ) {var $li = $( '<li id="' + file.id + '">' +'<p class="title">' + file.name + '</p>' +'<p class="imgWrap"></p>'+'<p class="progress"><span></span></p>' +'</li>' ),$btns = $('<div class="file-panel">' +'<span class="cancel">刪除</span>' +'<span class="rotateRight">向右旋轉(zhuǎn)</span>' +'<span class="rotateLeft">向左旋轉(zhuǎn)</span></div>').appendTo( $li ),$prgress = $li.find('p.progress span'),$wrap = $li.find( 'p.imgWrap' ),$info = $('<p class="error"></p>'),showError = function( code ) {switch( code ) {case 'exceed_size':text = '文件大小超出';break;case 'interrupt':text = '上傳暫停';break;default:text = '上傳失敗，請(qǐng)重試';break;}$info.text( text ).appendTo( $li );};if ( file.getStatus() === 'invalid' ) {showError( file.statusText );} else {// @todo lazyload$wrap.text( '預(yù)覽中' );uploader.makeThumb( file, function( error, src ) {var img;if ( error ) {$wrap.text( '不能預(yù)覽' );return;}if( isSupportBase64 ) {img = $('<img src="'+src+'">');$wrap.empty().append( img );} else {$.ajax('../../server/preview.php', {method: 'POST',data: src,dataType:'json'}).done(function( response ) {if (response.result) {img = $('<img src="'+response.result+'">');$wrap.empty().append( img );} else {$wrap.text("預(yù)覽出錯(cuò)");}});}}, thumbnailWidth, thumbnailHeight );percentages[ file.id ] = [ file.size, 0 ];file.rotation = 0;}file.on('statuschange', function( cur, prev ) {if ( prev === 'progress' ) {$prgress.hide().width(0);} else if ( prev === 'queued' ) {$li.off( 'mouseenter mouseleave' );$btns.remove();}// 成功if ( cur === 'error' || cur === 'invalid' ) {console.log( file.statusText );showError( file.statusText );percentages[ file.id ][ 1 ] = 1;} else if ( cur === 'interrupt' ) {showError( 'interrupt' );} else if ( cur === 'queued' ) {percentages[ file.id ][ 1 ] = 0;} else if ( cur === 'progress' ) {$info.remove();$prgress.css('display', 'block');} else if ( cur === 'complete' ) {$li.append( '<span class="success"></span>' );}$li.removeClass( 'state-' + prev ).addClass( 'state-' + cur );});$li.on( 'mouseenter', function() {$btns.stop().animate({height: 30});});$li.on( 'mouseleave', function() {$btns.stop().animate({height: 0});});$btns.on( 'click', 'span', function() {var index = $(this).index(),deg;switch ( index ) {case 0:uploader.removeFile( file );return;case 1:file.rotation += 90;break;case 2:file.rotation -= 90;break;}if ( supportTransition ) {deg = 'rotate(' + file.rotation + 'deg)';$wrap.css({'-webkit-transform': deg,'-mos-transform': deg,'-o-transform': deg,'transform': deg});} else {$wrap.css( 'filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ (~~((file.rotation/90)%4 + 4)%4) +')');// use jquery animate to rotation// $({// rotation: rotation// }).animate({// rotation: file.rotation// }, {// easing: 'linear',// step: function( now ) {// now = now * Math.PI / 180;// var cos = Math.cos( now ),// sin = Math.sin( now );// $wrap.css( 'filter', "progid:DXImageTransform.Microsoft.Matrix(M11=" + cos + ",M12=" + (-sin) + ",M21=" + sin + ",M22=" + cos + ",SizingMethod='auto expand')");// }// });}});$li.appendTo( $queue );}// 負(fù)責(zé)view的銷毀function removeFile( file ) {var $li = $('#'+file.id);delete percentages[ file.id ];updateTotalProgress();$li.off().find('.file-panel').off().end().remove();}function updateTotalProgress() {var loaded = 0,total = 0,spans = $progress.children(),percent;$.each( percentages, function( k, v ) {total += v[ 0 ];loaded += v[ 0 ] * v[ 1 ];} );percent = total ? loaded / total : 0;spans.eq( 0 ).text( Math.round( percent * 100 ) + '%' );spans.eq( 1 ).css( 'width', Math.round( percent * 100 ) + '%' );updateStatus();}function updateStatus() {var text = '', stats;if ( state === 'ready' ) {text = '選中' + fileCount + '張圖片，共' +WebUploader.formatSize( fileSize ) + '。';} else if ( state === 'confirm' ) {stats = uploader.getStats();if ( stats.uploadFailNum ) {text = '已成功上傳' + stats.successNum+ '張照片至XX相冊(cè)，'+stats.uploadFailNum + '張照片上傳失敗，<a class="retry" href="#">重新上傳</a>失敗圖片或<a class="ignore" href="#">忽略</a>'}} else {stats = uploader.getStats();text = '共' + fileCount + '張（' +WebUploader.formatSize( fileSize ) +'），已上傳' + stats.successNum + '張';if ( stats.uploadFailNum ) {text += '，失敗' + stats.uploadFailNum + '張';}}$info.html( text );}function setState( val ) {var file, stats;if ( val === state ) {return;}$upload.removeClass( 'state-' + state );$upload.addClass( 'state-' + val );state = val;switch ( state ) {case 'pedding':$placeHolder.removeClass( 'element-invisible' );$queue.hide();$statusBar.addClass( 'element-invisible' );uploader.refresh();break;case 'ready':$placeHolder.addClass( 'element-invisible' );$( '#filePicker2' ).removeClass( 'element-invisible');$queue.show();$statusBar.removeClass('element-invisible');uploader.refresh();break;case 'uploading':$( '#filePicker2' ).addClass( 'element-invisible' );$progress.show();$upload.text( '暫停上傳' );break;case 'paused':$progress.show();$upload.text( '繼續(xù)上傳' );break;case 'confirm':$progress.hide();$( '#filePicker2' ).removeClass( 'element-invisible' );$upload.text( '開始上傳' );stats = uploader.getStats();if ( stats.successNum && !stats.uploadFailNum ) {setState( 'finish' );return;}break;case 'finish':stats = uploader.getStats();if ( stats.successNum ) {console.log(uploader);alert( '上傳成功' );} else {// 沒有成功的圖片，重設(shè)state = 'done';location.reload();}break;}updateStatus();}uploader.onUploadProgress = function( file, percentage ) {var $li = $('#'+file.id),$percent = $li.find('.progress span');$percent.css( 'width', percentage * 100 + '%' );percentages[ file.id ][ 1 ] = percentage;updateTotalProgress();};uploader.onFileQueued = function( file ) {fileCount++;fileSize += file.size;if ( fileCount === 1 ) {$placeHolder.addClass( 'element-invisible' );$statusBar.show();}addFile( file );setState( 'ready' );updateTotalProgress();};uploader.onFileDequeued = function( file ) {fileCount--;fileSize -= file.size;if ( !fileCount ) {setState( 'pedding' );}removeFile( file );updateTotalProgress();};uploader.on( 'all', function( type ) {var stats;switch( type ) {case 'uploadFinished':setState( 'confirm' );break;case 'startUpload':setState( 'uploading' );break;case 'stopUpload':setState( 'paused' );break;}});uploader.onError = function( code ) {alert( 'Eroor: ' + code );};$upload.on('click', function() {if ( $(this).hasClass( 'disabled' ) ) {return false;}if ( state === 'ready' ) {uploader.upload();} else if ( state === 'paused' ) {uploader.upload();} else if ( state === 'uploading' ) {uploader.stop();}});$info.on( 'click', '.retry', function() {uploader.retry();} );$info.on( 'click', '.ignore', function() {alert( 'todo' );} );$upload.addClass( 'state-' + state );updateTotalProgress();});})( jQuery );

7.顯示效果

總結(jié)

以上是生活随笔為你收集整理的springMVC+WebUploader实现多图片上传的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。