一、去官網(wǎng)下載webuploader文件上傳插件

下載好后把它放到Javaweb項目的文件夾中(我放到了webcontent下面的static里面)

二、復(fù)制前端的樣式

把這段代碼放到你想要放到的位置(刷新頁面和示例中不一樣？不用擔(dān)心因為你還沒有初始化{就是還沒有導(dǎo)入swf文件}，指定路徑后刷新應(yīng)該就好了)

三、復(fù)制實現(xiàn)文件異步上傳的js代碼(這里我們只復(fù)制圖片上傳的部分)

js源碼的中文是亂碼，應(yīng)該是缺少谷歌改編碼格式的插件，我這也沒想辦法解決，因為代碼是能用的

四、修改必要的參數(shù)(直接附上修改后的源碼)

1 //圖片上傳demo

2 jQuery(function() {3 var $ =jQuery,4 $list = $('#fileList'),5 //優(yōu)化retina, 在retina下這個值是2

6 ratio = window.devicePixelRatio || 1,7

8 //縮略圖大小

9 thumbnailWidth = 100 *ratio,10 thumbnailHeight = 100 *ratio,11

12 //Web Uploader實例

13 uploader;14

15 //初始化Web Uploader

16 uploader =WebUploader.create({17 //添加一些自己需要的參數(shù)

18

19

20 //自動上傳

21 auto: true,22

23 //sendAsBinary: true,

24

25 //swf文件路徑 (修改為swf文件的真實路徑)

26 /**27 *28 * statics/webuploader-0.1.5/Uploader.swf29 */

30 swf: 'statics/webuploader-0.1.5/Uploader.swf',31

32 //文件接收服務(wù)端 (改為處理圖片上傳自己定義的路由)

33 server: 'uploader.jch',//本地存儲

35

36 //選擇文件的按鈕。可選

37 //內(nèi)部根據(jù)當(dāng)前是創(chuàng)建，可能是input元素，也可能是flash

38 pick: '#filePicker',39

40 //只允許選擇文件。可選

41 accept: {42 title: 'Images',43 extensions: 'gif,jpg,jpeg,bmp,png',44 mimeTypes: 'image/*'

45 }46 });47

48 //當(dāng)有文件添加進(jìn)來的時候

49 uploader.on( 'fileQueued', function( file ) {50 var $li =$(51 '

' +

52 '' +

53 '

' + file.name + '' +

54 '

'

55 ),56 $img = $li.find('img');57 //選擇新圖之前先清除之前的預(yù)覽數(shù)據(jù)

58 //類選擇器(class)用點(.)

59 $('.thumbnail').remove();60 $list.append( $li );61

62 //創(chuàng)建縮略圖

63 uploader.makeThumb( file, function( error, src ) {64 if( error ) {65 $img.replaceWith('不能預(yù)覽');66 return;67 }68

69 $img.attr( 'src', src );70 }, thumbnailWidth, thumbnailHeight );71 });72

73 //文件上傳過程中上傳進(jìn)度條實時顯示

74 uploader.on( 'uploadProgress', function( file, percentage ) {75 var $li = $( '#'+file.id ),76 $percent = $li.find('.progress span');77

78 //避免重復(fù)創(chuàng)建

79 if ( !$percent.length ) {80 $percent = $('

85 $percent.css( 'width', percentage * 100 + '%');86 });87

88 //文件上傳成功, 給item添加成功class，用樣式標(biāo)記上傳成功

89 //這里是回調(diào)的地方，請求發(fā)出給對應(yīng)的路由后，對應(yīng)路由上的控制器方法

90 //處理請求(這里是將文件通過Storage上傳到public磁盤)請求處理完成后

91 //給發(fā)出請求的人一個回應(yīng)(回調(diào))把一些數(shù)據(jù)傳回去

92 uploader.on( 'uploadSuccess', function( file,response ) {93 //因為我們沒有用到id值，所以file并不是我們請求成功的返回值

94 //想要接受回調(diào)的一些數(shù)據(jù)必須自己寫,這個函數(shù)的第二個參數(shù)才是我們接受的返回值

95 //打印一下看看是不是

96 //console.log(response);

97 $( '#'+file.id ).addClass('upload-state-done');98 //將返回值中的path寫到隱藏域中

99 $('input[name=avatar]').val(response.path);100 });101

102 //文件上傳失敗，顯示上傳出錯

103 uploader.on( 'uploadError', function( file ) {104 var $li = $( '#'+file.id ),105 $error = $li.find('div.error');106

107 //避免重復(fù)創(chuàng)建

108 if ( !$error.length ) {109 $error = $('

112 $error.text('上傳失敗');113 });114

115 //完成上傳完了，成功或者失敗，先刪除進(jìn)度條

116 uploader.on( 'uploadComplete', function( file ) {117 $( '#'+file.id ).find('.progress').remove();118 });119 });

修改參數(shù)說明：

①swf: 'statics/webuploader-0.1.5/Uploader.swf',這個是你下載的webuploader插件中swf文件的具體地址，一定要確保能導(dǎo)入進(jìn)去，如果不確定可以打開瀏覽器的檢查看是否有載入文件的報錯，如果有就自己慢慢調(diào)試直到?jīng)]有報載入的錯誤說明載入成功了

②server: 'uploader.jch',這個是你后端實現(xiàn)上傳功能的控制器中方法的路由。(注意哦！本插件的上傳文件到其他地方的代碼是需要你自己在控制器中編寫的)

③

?這段代碼可以修改成一次只上傳一張圖片，每次只顯示一張圖片

暫時先修改這么多。刷新頁面，看是否都正常，上傳一張圖片看是否會報錯(如果瀏覽器不報錯插件就不會報錯，瀏覽器不報錯插件就認(rèn)為上傳成功)

五、編寫后臺控制器代碼

1 packagecom.jch.controller;2

3 importjava.io.File;4 importjava.util.List;5 importjava.util.UUID;6

7 importjavax.servlet.http.HttpServletRequest;8 importjavax.servlet.http.HttpServletResponse;9

10 importorg.apache.commons.fileupload.FileItem;11 importorg.apache.commons.fileupload.disk.DiskFileItemFactory;12 importorg.apache.commons.fileupload.servlet.ServletFileUpload;13 importorg.springframework.stereotype.Controller;14 importorg.springframework.web.bind.annotation.RequestMapping;15 importorg.springframework.web.bind.annotation.RequestMethod;16 importorg.springframework.web.bind.annotation.ResponseBody;17

18 importnet.sf.json.JSONObject;19

20 @Controller21 public classUploaderController {22

23 @ResponseBody24 @RequestMapping(value = "uploader.jch", method =RequestMethod.POST)25 public JSONObject uploader(HttpServletRequest request, HttpServletResponse response) throwsException {26 //TODO Auto-generated method stub

27

28 /*

29 * 頭像上傳路徑和上傳文件名30 */

31 String path = null;32 String filename = null;33 /*

34 * 設(shè)置上傳位置35 * Tomcat項目所在根目錄36 */

37 path = request.getSession().getServletContext().getRealPath("/uploads/");38

39 //判斷路徑是否存在

40 File file = newFile(path);41 if (!file.exists()) {42 //若不存在創(chuàng)建文件夾

43 file.mkdirs();44 }45 /*

46 * 解析request對象，獲取上傳文件項47 */

48 DiskFileItemFactory factory = newDiskFileItemFactory();49 ServletFileUpload upload = newServletFileUpload(factory);50 //解析request

51 List items =upload.parseRequest(request);52 //遍歷

53 for(FileItem item : items) {54 //進(jìn)行判斷，當(dāng)前item對象是否是上傳文件項

55 if(item.isFormField()) {56 //說明是普通表單項

57

58 } else{59 //說明上傳文件項60 //獲取上傳文件的名稱

61 filename =item.getName();62 //重命名文件，把文件的名稱設(shè)置成唯一值

63 String uuid = UUID.randomUUID().toString().replace("-", "");64 filename = uuid + "_" +filename;65 //把文件寫入上傳位置，完成文件上傳

66 item.write(newFile(path, filename));67 //刪除臨時文件

68 item.delete();69 }70 }71

72 /*

73 * 返回Json數(shù)據(jù)74 */

75 String pathandfilename = path +filename;76 JSONObject json =newJSONObject();77 json.put("path", pathandfilename);78 returnjson;79

80

81 }82 }

注意：請求成功后要響應(yīng)一個上傳位置的json數(shù)據(jù)，這段數(shù)據(jù)要放到前端注冊頁面的隱藏域的value值中，最后提交注冊的時候一并寫入數(shù)據(jù)庫。

六、前端添加隱藏域

1

這段隱藏域只要在你的form表單中即可

七、通過js代碼修改隱藏域value的值

注：添加一個response參數(shù)，這個是保存了返回的數(shù)據(jù)，注意是你的隱藏域name值，修改的時候注意查看。

到此為止頭像的異步上傳基本思路和代碼就是這樣了，當(dāng)然這其中一定會遇到各種bug，耐心查錯。控制器里需要各種jar包，有時候版本過高也會帶來錯誤也要注意版本問題。

總結(jié)

以上是生活随笔為你收集整理的java上传头像插件_JSP+SpringMVC框架使用WebUploader插件实现注册时候头像图片的异步上传功能...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。