1.webuploader的文件下载

链接：http://pan.baidu.com/s/1jIdty30 密码：un47

2.spring的静态资源映射

<!-- 静态资源映射 --><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:   励图高科<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();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.pngfileName = destDir+fileNameNew;} catch (Exception e) {throw e;}
}
}

4.controller层上传函数

@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页面

<%@ 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"><!--头部，相册选择和格式选择--><div id="uploader"><div class="queueList"><div id="dndArea" class="placeholder"><div id="filePicker"></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 class="form-group col-sm-6"><label for="name" class="form-group col-sm-12">新闻首页导航图片：</label> <img id="myImg" alt="导航图片" src=""style="width: 300px; height: 300px;"> <input type="text"class="form-control" id="newsImg" placeholder="新闻导航图片路径" 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( $ ){// 当domReady的时候开始初始化$(function() {var $wrap = $('#uploader'),// 图片容器$queue = $( '<ul class="filelist"></ul>' ).appendTo( $wrap.find( '.queueList' ) ),// 状态栏，包括进度和控制按钮$statusBar = $wrap.find( '.statusBar' ),// 文件总体选择信息。$info = $statusBar.find( '.info' ),// 上传按钮$upload = $wrap.find( '.uploadBtn' ),// 没选择文件之前的内容。$placeHolder = $wrap.find( '.placeholder' ),$progress = $statusBar.find( '.progress' ).hide(),// 添加的文件数量fileCount = 0,// 添加的文件总大小fileSize = 0,// 优化retina, 在retina下这个值是2ratio = window.devicePixelRatio || 1,// 缩略图大小thumbnailWidth = 110 * ratio,thumbnailHeight = 110 * ratio,// 可能有pedding, ready, uploading, confirm, done.state = 'pedding',// 所有文件的进度信息，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;} )(),// 检测是否已经安装flash，检测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实例uploader;if ( !WebUploader.Uploader.support('flash') && WebUploader.browser.ie ) {// flash 安装了但是版本过低。if (flashVersion) {(function(container) {window['expressinstallcallback'] = function( state ) {switch(state) {case 'Download.Cancelled':alert('您取消了更新！')break;case 'Download.Failed':alert('安装失败')break;default:alert('安装已成功，请刷新！');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);// 压根就没有安转。} 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;}// 实例化uploader = WebUploader.create({pick: {id: '#filePicker',label: '点击选择图片'},formData: {uid: 123},dnd: '#dndArea',paste: '#uploader',swf: '../Uploader.swf',chunked: false,chunkSize: 512 * 1024,server: 'news_uploder',//请求后台的入口// runtimeOrder: 'flash',// accept: {//     title: 'Images',//     extensions: 'gif,jpg,jpeg,bmp,png',//     mimeTypes: 'image/*'// },accept: {title: 'Images',extensions: 'gif,jpg,jpeg,bmp,png',mimeTypes: 'image/*'},// 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候，把图片打开。disableGlobalDnd: true,fileNumLimit: 100,fileSizeLimit: 200 * 1024 * 1024,    // 200 MfileSingleSizeLimit: 50 * 1024 * 1024    // 50 M});// 拖拽时不接受 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: '继续添加'});uploader.on('ready', function() {window.uploader = uploader;}); //文件上传成功返回的文件路径uploader.on('uploadSuccess', function(file, json) {  console.log(json);$("#myImg").attr("src",json);$("#newsImg").val(json);}); // 当有文件添加进来时执行，负责view的创建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">向右旋转</span>' +'<span class="rotateLeft">向左旋转</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 = '上传失败，请重试';break;}$info.text( text ).appendTo( $li );};if ( file.getStatus() === 'invalid' ) {showError( file.statusText );} else {// @todo lazyload$wrap.text( '预览中' );uploader.makeThumb( file, function( error, src ) {var img;if ( error ) {$wrap.text( '不能预览' );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("预览出错");}});}}, 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 );}// 负责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相册，'+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( '继续上传' );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 {// 没有成功的图片，重设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.显示效果

springMVC+WebUploader实现多图片上传相关推荐

java多图片上传json_[Java教程]SpringMVC框架五：图片上传与JSON交互
[Java教程]SpringMVC框架五:图片上传与JSON交互 0 2018-08-07 22:00:42 在正式图片上传之前,先处理一个细节问题: 每一次发布项目,Tomcat都会重新解压war包 ...
Springmvc之CRUD和图片上传与下载
目录一.Springmvc之CRUD 二.图片上传三.图片下载一.Springmvc之CRUD 之前crud:自定义mvc结构 1.导入jar包 2.框架配置文件 mvc.xml 3.web.x ...
webuploader实现批量图片上传功能
这个功能是我来新公司做的第一个工作.因为新公司的一个项目是涉及到房产中介管理系统,所以需要提供用户批量上传图片的功能.于是在网上找到了webuploader插件,调用这个api功能. WebUploa ...
SpringMVC实现简单的图片上传DEMO
为什么80%的码农都做不了架构师?>>> 先定义好picture的Entity. 前台页面:(css,js等没给出) <%-- productList.jsp --%&g ...
element显示服务器的图片,Vue+ElementUI+SpringMVC实现图片上传和回显
Vue+ElementUI+SpringMVC实现图片上传和table回显而我们也常遇到表单中包含图片上传的需求,并且需要在table中显示图片,所以这里我就讲一下结合后端的SpringMVC框架如 ...
Vue+ElementUI+SpringMVC实现图片上传和回显
Vue+ElementUI+SpringMVC实现图片上传和table回显在之前我们已经讲过了 Vue+ElementUI+SpringMVC实现分页 . 而我们也常遇到表单中包含图片上传的需求,并 ...
JAVAWEB开发之SpringMVC详解(二)——高级开发、数据回显、参数绑定集合、图片上传、json交互、validation校验、异常处理、RESTful支持、拦截器
知识回顾 springmvc框架用户请求url到DispatcherServlet前端控制器,相当于中央调度器,降低系统各组件之间的耦合度. DispatcherServlet前端控制器通过Hand ...
妈蛋：kinMaxShow轮播图异常，WebUploader图片上传坑爹，图片被压缩了
2019独角兽企业重金招聘Python工程师标准>>> 今天晚上在改造轮播图. 原来的代码是这样的: <div> <img src="${static}/ ...
妈蛋：kinMaxShow旋转木马异常，WebUploader图片上传坑爹，图像被压缩
今天晚上在改造轮播图. 原来的代码是这种: <div> <img src="${static}/image/index/banner/`.jpg" /> & ...

springMVC+WebUploader实现多图片上传

1.webuploader的文件下载

2.spring的静态资源映射

3.上传文件的工具类WebuploaderUtil.JAVA

4.controller层上传函数

5.JSP页面

6.news_img_edit_upload.js主要代码

7.显示效果

springMVC+WebUploader实现多图片上传相关推荐

最新文章

热门文章