本文为大家分享了 webuploader springmvc 实现 图片上传 的具体代码，供大家参考，具体内容如下
jsp文件
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 |
<%@ 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>insert title here</title> <link rel= "stylesheet" type= "text/css" href= "${pagecontext.request.contextpath}/manage/widget/webuploader/0.1.5/webuploader.css" rel= "external nofollow" > <script src= "${pagecontext.request.contextpath}/manage/assets/js/jquery.min.js" ></script> <script src= "${pagecontext.request.contextpath}/manage/widget/webuploader/0.1.5/webuploader.js" ></script> </head> <body> <h3>图片上传</h3> <!--dom结构部分--> <div id= "uploader-demo" > <!-- 用来存放item --> <div id= "filelist" class = "uploader-list" ></div> <div id= "upinfo" ></div> <div id= "filepicker" >选择文件</div> </div> <input type= "button" id= "btn" value= "开始上传" >
<script> //图片上传demo jquery(function() { var $ = jquery, $list = $( '#filelist' ), // 优化retina, 在retina下这个值是2 ratio = window.devicepixelratio || 1 , // 缩略图大小 thumbnailwidth = 100 * ratio, thumbnailheight = 100 * ratio, // web uploader实例 uploader; // 初始化web uploader uploader = webuploader.create({ // 自动上传。 auto: false , // swf文件路径 swf: '${pagecontext.request.contextpath }/manage/widget/webuploader/0.1.5/uploader.swf' , // 文件接收服务端。 server: '${pagecontext.request.contextpath }/uploader.action' , threads: '5' , //同时运行5个线程传输 filenumlimit: '10' , //文件总数量只能选择10个
// 选择文件的按钮。可选。 pick: {id: '#filepicker' , //选择文件的按钮 multiple: true }, //允许可以同时选择多个图片 // 图片质量，只有type为`image/jpeg`的时候才有效。 quality: 90 ,
//限制传输文件类型，accept可以不写 accept: { title: 'images' , //描述 extensions: 'gif,jpg,jpeg,bmp,png,zip' , //类型 mimetypes: 'image/*' //mime类型 } });
// 当有文件添加进来的时候，创建img显示缩略图使用 uploader.on( 'filequeued' , function( file ) { var $li = $( '<div id="' + file.id + '" class="file-item thumbnail">' + '<img>' + '<div class="info">' + file.name + '</div>' + '</div>' ), $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 ); }, thumbnailwidth, thumbnailheight ); });
// 文件上传过程中创建进度条实时显示。 uploadprogress事件：上传过程中触发，携带上传进度。 file文件对象 percentage传输进度 nuber类型 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, 用样式标记上传成功。 file：文件对象， response：服务器返回数据 uploader.on( 'uploadsuccess' , function( file,response) { $( '#' +file.id ).addclass( 'upload-state-done' ); //console.info(response); $( "#upinfo" ).html( "<font color='red'>" +response._raw+ "</font>" ); });
// 文件上传失败 file:文件对象 ， code：出错代码 uploader.on( 'uploaderror' , function(file,code) { var $li = $( '#' +file.id ), $error = $li.find( 'div.error' );
// 避免重复创建 if ( !$error.length ) { $error = $( '<div class="error"></div>' ).appendto( $li ); }
$error.text( '上传失败!' ); });
// 不管成功或者失败，文件上传完成时触发。 file： 文件对象 uploader.on( 'uploadcomplete' , function( file ) { $( '#' +file.id ).find( '.progress' ).remove(); });
//绑定提交事件 $( "#btn" ).click(function() { console.log( "上传..." ); uploader.upload(); //执行手动提交 console.log( "上传成功" ); alert( "上传成功!" ); });
}); </script> </body> </html> |
springmvc 的 servlet加入以下代码(允许上传):
|
1 |
<bean id= "multipartresolver" class = "org.springframework.web.multipart.commons.commonsmultipartresolver" /> |
引入的包
commons-io-1.3.2.jar
commons-fileupload-1.2.1.jar
java代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
package com.shopping.controller;
import java.io.file; import java.io.ioexception; import java.util.map;
import javax.servlet.http.httpservletrequest; import javax.servlet.http.httpservletresponse;
import org.springframework.stereotype.controller; import org.springframework.web.bind.annotation.requestmapping; import org.springframework.web.multipart.multipartfile; import org.springframework.web.multipart.multiparthttpservletrequest;
/** * @author mazn * @date 创建时间：2017年5月2日 下午10:02:36 * @parameter * @return */ @controller public class uploadimgcontroller { int counter = 0 ;
@requestmapping ( "/uploader" ) public void upload(httpservletrequest request,httpservletresponse response){
//string filename; // file tagetfile; system.out.println( "收到图片!" ); multiparthttpservletrequest murequest = (multiparthttpservletrequest)request; map<string, multipartfile> files = murequest.getfilemap(); //得到文件map对象 //string upaloadurl = request.getsession().getservletcontext().getrealpath("/")+"upload/";//得到当前工程路径拼接上文件名 string t=thread.currentthread().getcontextclassloader().getresource( "" ).getpath(); int num=t.indexof( ".metadata" ); string small = "small" ; string upaloadurl=t.substring( 1 ,num).replace( '/' , '\' )+ "image\" +small+ "\" ; //+"项目名\webcontent\文件"; file dir = new file(upaloadurl); system.out.println(upaloadurl); string img_url = upaloadurl; //图片路径 if (!dir.exists()) //目录不存在则创建 dir.mkdirs(); for (multipartfile file :files.values()){ counter++; string filename=file.getoriginalfilename(); file tagetfile = new file(upaloadurl+filename); //创建文件对象 img_url += filename; if (!tagetfile.exists()){ //文件名不存在 则新建文件，并将文件复制到新建文件中 try { tagetfile.createnewfile(); } catch (ioexception e) { e.printstacktrace(); } try { file.transferto(tagetfile); } catch (illegalstateexception e) { e.printstacktrace(); } catch (ioexception e) { e.printstacktrace(); }
} } system.out.println(img_url); system.out.println( "接收完毕" +counter); } } |
参考： webuploader客户端批量上传图片 后台使用springmvc
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
原文链接：https://blog.csdn.net/qq_33303319/article/details/71114012
查看更多关于webuploader+springmvc实现图片上传功能的详细内容...