springMVC+WebUploader实现多图片上传
来源:互联网 发布:单页seo卖产品 编辑:程序博客网 时间:2024/06/05 16:07
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" onclick="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下这个值是2 ratio = window.devicePixelRatio || 1, // 缩略图大小 thumbnailWidth = 110 * ratio, thumbnailHeight = 110 * ratio, // 可能有pedding, ready, uploading, confirm, done. state = 'pedding', // 所有文件的进度信息,key为file id percentages = {}, // 判断浏览器是否支持图片的base64 isSupportBase64 = ( 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 object var 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 M fileSingleSizeLimit: 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.显示效果
0 0
- springMVC+WebUploader实现多图片上传
- webuploader+springmvc实现图片上传
- webuploader+springMvc+JSP 多图上传实现
- 使用WebUploader跨域上传图片,用SpringMVC实现服务器端
- WebUploader+SpringMVC实现文件上传功能
- WebUploader+SpringMVC实现文件上传功能
- 多图片上传插件webuploader
- JFinal+WebUploader实现图片的异步上传
- webuploader实现批量图片上传功能
- webuploader实现点击图片上传功能
- 使用WebUploader上传图片
- WebUploader图片上传实例
- [整理]WebUploader + SpringMVC 实现多文件断点续传之一 多文件上传
- webuploader+springmvc实现多文件上传(html+js+css原创,后台代码借鉴)
- webuploader+springmvc实现多文件上传(html+js+css原创,后台代码借鉴)
- SpringMVC上传图片总结(2)--- 使用百度webuploader上传组件进行上传图片
- (三)springMVC WebUploader分片上传
- webuploader 多图上传删除方法实现
- gitHub使用入门和github for windows的安装教程
- php 多线程pthreads官网翻译
- [bzoj] 1029 [JSOI2007]建筑抢修
- kafka发送消息问题,could not be resolved
- Struts2-Action-7-系列问题(Action中的web元素访问)
- springMVC+WebUploader实现多图片上传
- WIN32窗口创建
- 题目1137:浮点数加法
- c sharp 菜鸟的学习历程
- Tween 动画
- linux tomcat 内存无法释放
- Linux 发送邮件
- 读取配置applicationContext.xml 的5种方法
- U盘存储