本文為大家分享了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
