1.在jsp頁面<head>標簽內(nèi)引入script文件(注意順序)
1
2
|
<script type= "text/javascript" src= "resources/js/jquery-3.3.1.min.js" ></script> <script type= "text/javascript" src= "resources/js/ajaxfileupload.js" ></script> |
2.springmvc.xml配置文件中(必須進行配置)
1
2
3
4
|
<!--使用springmvc上傳圖片 ajaxfileupload--> <bean id= "multipartresolver" class = "org.springframework.web.multipart.commons.commonsmultipartresolver" > <property name= "maxuploadsize" value= "10485760" /> </bean> |
3.<input>標簽(id屬性,<script>中 ajaxfileupload的fileelementid會用到)
1
|
<input type= "file" id= "headimg" name= "headimg" /> |
4.在<script>標簽中,我將ajaxfileupload寫在一個函數(shù)里,在需要用到上傳圖片的位置,調(diào)用該函數(shù)
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
|
function headimgupload(){ //圖片上傳函數(shù) var results = "" ; var account = $( "#account" ).val(); //account、identity 這兩個變量,根據(jù)我的需求會在后面用到,閱讀者可以根據(jù)自己的需求刪掉或者修改這兩個變量 var identity = $( "input[name='identity']:checked" ).val(); $.ajaxfileupload({ url: "register/headimgupload?account=" +account+ "&identity=" +identity, //根據(jù)url訪問controller層中的方法 secureuri: false , fileelementid: "headimg" , //<input>標簽中的id屬性 type: "post" , datatype: "text" , //服務器返回的數(shù)據(jù)類型 success:function (result) { result = result.replace(/<pre.*?>/g, '' ); //ajaxfileupload會對服務器響應回來的text內(nèi)容加上<pre style="....">text</pre>前后綴 result = result.replace(/<pre.*?>/g, '' ); result = result.replace( "<pre>" , '' ); result = result.replace( "</pre>" , '' ); result = result.replace( "<pre>" , '' ); result = result.replace( "</pre>" , '' ); result = json.parse(result); //轉換為json格式 results = result.result; alert(result); }, error:function (data,status,error) { alert( "失敗!!!" +error); } }); } |
5.controller層
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
|
@controller @requestmapping (value = "register" ) public class registercontroller { //用戶頭像上傳 @requestmapping (value = "/headimgupload" ,method = requestmethod.post) @responsebody public map<string,object> headimgupload( @requestparam multipartfile headimg, string account, string identity, httpservletrequest request){ //上傳的結果 string result = "fail" ; //頭像上傳到的位置 string imgrealpath = "" ; try { //確保上傳的圖片不為空 if (headimg != null && !headimg.isempty()){ //判斷注冊用戶的身份,商戶還是會員 if (identity.equals( "member" )){ //會員 imgrealpath = request.getsession().getservletcontext().getrealpath( "/resources/image/member" ); } else if (identity.equals( "businessman" )){ //商戶 imgrealpath = request.getsession().getservletcontext().getrealpath( "/resources/image/businessman" ); } system.out.println(imgrealpath); //在控制臺打印一下路徑 //上傳完成后保存的文件名 string filename= account + ".jpg" ; //文件夾不存在的話,新建一個 file filefolder = new file(imgrealpath); if (!filefolder.exists()){ filefolder.mkdirs(); } file file = new file(filefolder,filename); //transferto(),springmvc的方法,用于圖片上傳時,將內(nèi)存中的圖片寫入磁盤 headimg.transferto(file); //會報io異常 result = "success" ; } } catch (ioexception e){ e.printstacktrace(); } map<string,object> resultmap = new hashmap<string,object>(); resultmap.put( "result" ,result); return resultmap; } } |
總結
以上所述是小編給大家介紹的springmvc使用ajaxfailupload上傳圖片,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對服務器之家網(wǎng)站的支持!
原文鏈接:https://blog.csdn.net/Tdh5258/article/details/80533997