本文为大家分享了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>//图片上传demojquery(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 */@controllerpublic 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
