uploadify2.1使用一】【Spring MVC uploadify2.1】批量文件、图片上传

uploadify2.1使用一】【Spring MVC uploadify2.1】批量文件、图片上传

分类： JS JQuery JAVA 2013-04-08 00:15  2891人阅读  评论(3)  收藏  举报

今天在做一个批量上传图片的需求，google下，觉得uploadify在jquery的上传控件还是挺不错，特写下怎么使用。

1、下载资源包，2.1.0整理，免费分享地址

http://download.youkuaiyun.com/detail/dracotianlong/5232122

2、需要的资源

      （1）：jquery-1.3.2.min.js
      （2）：jquery.uploadify.v2.1.0.min.js
       （3）：swfobject.js
       （4）：uploadify.css
       （5）：uploadify.swf

3、页面引用

<script type="text/javascript" src="${base}/thirdparty/uploadify/swfobject.js"></script>
<script type="text/javascript" src="${base}/thirdparty/uploadify/jquery.uploadify.v2.1.0.min.js"></script>
<link href="${base}/thirdparty/uploadify/uploadify.css" rel="stylesheet" type="text/css" />

4、使用

[javascript]  view plain copy print ?

1. $(document).ready(function() {  
2.     $("#multiple_file_upload").uploadify({  
3.               'uploader'       :'${base}/thirdparty/uploadify/uploadify.swf?random=' + (new Date()).getTime(),  
4.               'cancelImg'      :'${base}/thirdparty/uploadify/cancel.png',  
5.               'script'         :'../common/o_multiple_upload.do',//要提交到的处理文件上传的PHP文件  
6.               'auto'           : false, //是否自动开始     
7.               'multi'          : true, //是否支持多文件上传  
8.               'buttonText'     : 'browe', //按钮上的文字   
9.               'simUploadLimit' : 1000, //一次同步上传的文件数目     
10.               'sizeLimit'      : 19871202, //设置单个文件大小限制     
11.               'queueSizeLimit' : 1000, //队列中同时存在的文件个数限制     
12.               'fileDesc'       : '支持格式:jpg/gif/jpeg/png/bmp.', //如果配置了以下的'fileExt'属性，那么这个属性是必须的    
13.               'fileExt'        : '*.jpg;*.gif;*.jpeg;*.png;*.bmp',//允许的格式       
14.               onComplete: function (event, queueID, fileObj, response, data) {     
15.                   //$('<li></li>').appendTo('.files').text(response);  
16.                   var picIndexPlus = picIndex++;  
17.                   var uploadPath =response;  
18.                   $('#picBefore').before(picTpl(picIndexPlus));  
19.                   var uploadImgPathId = "uploadImgPath" + (picIndexPlus);  
20.                   document.getElementById(uploadImgPathId).value=uploadPath;  
21.               },  
22.               onError: function(event, queueID, fileObj) {     
23.                   alert("文件:" + fileObj.name + "上传失败");     
24.               },  
25.               onCancel: function(event, queueID, fileObj){     
26.                   //alert("取消了" + fileObj.name);     
27.               }  
28.      });  
29. });  

5、后台代码Java代码

[java]  view plain copy print ?

1. /** 
2.     * 批量上传图片  
3.     *  
4.     * @param filename 文件名 
5.     * @param uploadNum 上传数量 
6.     * @param mark 
7.     * @param file 文件流 
8.     * @param request 
9.     * @param model 
10.     * @return 
11.     * @throws Exception 
12.     */  
13.    @RequestMapping(value = "/common/o_multiple_upload.do")  
14.    public @ResponseBody  
15.    String executeMultiple(String filename, Integer uploadNum, Boolean mark, HttpServletRequest request,  
16.            HttpServletResponse response, ModelMap model) throws Exception  
17.    {  
18.        MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;  
19.        Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();  
20.        // 存储fileUrl  
21.        List<String> uploadPaths = new ArrayList<String>();  
22.        String fileUrl = null;  
23.        for (Map.Entry<String, MultipartFile> entity : fileMap.entrySet())  
24.        {  
25.            // 获取MulipartFile对象  
26.            MultipartFile file = entity.getValue();  
27.            WebErrors errors = validate(filename, file, request);  
28.            if (errors.hasErrors())  
29.            {  
30.                model.addAttribute(ERROR, errors.getErrors().get(0));  
31.                return RESULT_PAGE;  
32.            }  
33.            CmsSite site = CmsUtils.getSite(request);  
34.            MarkConfig conf = site.getConfig().getMarkConfig();  
35.            if (mark == null)  
36.            {  
37.                mark = conf.getOn();  
38.            }  
39.            // 上传文件名  
40.            String origName = file.getOriginalFilename();  
41.            String ext = FilenameUtils.getExtension(origName).toLowerCase(Locale.ENGLISH);  
42.            try  
43.            {  
44.                if (site.getConfig().getUploadToDb())  
45.                {  
46.                    String dbFilePath = site.getConfig().getDbFileUri();  
47.                    if (!StringUtils.isBlank(filename))  
48.                    {  
49.                        filename = filename.substring(dbFilePath.length());  
50.                        if (mark)  
51.                        {  
52.                            File tempFile = mark(file, conf);  
53.                            fileUrl = dbFileMng.storeByFilename(filename, new FileInputStream(tempFile));  
54.                            tempFile.delete();  
55.                        }  
56.                        else  
57.                        {  
58.                            fileUrl = dbFileMng.storeByFilename(filename, file.getInputStream());  
59.                        }  
60.                    }  
61.                    else  
62.                    {  
63.                        if (mark)  
64.                        {  
65.                            File tempFile = mark(file, conf);  
66.                            fileUrl = dbFileMng.storeByExt(site.getUploadPath(), ext, new FileInputStream(tempFile));  
67.                            tempFile.delete();  
68.                        }  
69.                        else  
70.                        {  
71.                            fileUrl = dbFileMng.storeByExt(site.getUploadPath(), ext, file.getInputStream());  
72.                        }  
73.                        // 加上访问地址  
74.                        fileUrl = request.getContextPath() + dbFilePath + fileUrl;  
75.                    }  
76.                }  
77.                else if (site.getUploadFtp() != null)  
78.                {  
79.                    Ftp ftp = site.getUploadFtp();  
80.                    String ftpUrl = ftp.getUrl();  
81.                    if (!StringUtils.isBlank(filename))  
82.                    {  
83.                        filename = filename.substring(ftpUrl.length());  
84.                        if (mark)  
85.                        {  
86.                            File tempFile = mark(file, conf);  
87.                            fileUrl = ftp.storeByFilename(filename, new FileInputStream(tempFile));  
88.                            tempFile.delete();  
89.                        }  
90.                        else  
91.                        {  
92.                            fileUrl = ftp.storeByFilename(filename, file.getInputStream());  
93.                        }  
94.                    }  
95.                    else  
96.                    {  
97.                        if (mark)  
98.                        {  
99.                            File tempFile = mark(file, conf);  
100.                            fileUrl = ftp.storeByExt(site.getUploadPath(), ext, new FileInputStream(tempFile));  
101.                            tempFile.delete();  
102.                        }  
103.                        else  
104.                        {  
105.                            fileUrl = ftp.storeByExt(site.getUploadPath(), ext, file.getInputStream());  
106.                        }  
107.                        // 加上url前缀  
108.                        fileUrl = ftpUrl + fileUrl;  
109.                    }  
110.                }  
111.                else  
112.                {  
113.                    String ctx = request.getContextPath();  
114.                    if (!StringUtils.isBlank(filename))  
115.                    {  
116.                        filename = filename.substring(ctx.length());  
117.                        if (mark)  
118.                        {  
119.                            File tempFile = mark(file, conf);  
120.                            fileUrl = fileRepository.storeByFilename(filename, tempFile);  
121.                            tempFile.delete();  
122.                        }  
123.                        else  
124.                        {  
125.                            fileUrl = fileRepository.storeByFilename(filename, file);  
126.                        }  
127.                    }  
128.                    else  
129.                    {  
130.                        if (mark)  
131.                        {  
132.                            File tempFile = mark(file, conf);  
133.                            fileUrl = fileRepository.storeByExt(site.getUploadPath(), ext, tempFile);  
134.                            tempFile.delete();  
135.                        }  
136.                        else  
137.                        {  
138.                            fileUrl = fileRepository.storeByExt(site.getUploadPath(), ext, file);  
139.                        }  
140.                        // 加上部署路径  
141.                        fileUrl = ctx + fileUrl;  
142.                    }  
143.                }  
144.   
145.                fileMng.saveFileByPath(fileUrl, origName, false);  
146.                uploadPaths.add(fileUrl);  
147.   
148.                model.addAttribute("uploadNum", uploadNum);  
149.            }  
150.            catch (IllegalStateException e)  
151.            {  
152.                model.addAttribute(ERROR, e.getMessage());  
153.                log.error("upload file error!", e);  
154.            }  
155.            catch (IOException e)  
156.            {  
157.                model.addAttribute(ERROR, e.getMessage());  
158.                log.error("upload file error!", e);  
159.            }  
160.            catch (Exception e)  
161.            {  
162.                model.addAttribute(ERROR, e.getMessage());  
163.                log.error("upload file error!", e);  
164.            }  
165.        }  
166.        // model.addAttribute("uploadPaths", uploadPaths);  
167.        return fileUrl;  
168.    }  

6、实现效果