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

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

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

http://download.csdn.net/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、使用

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

5、后台代码Java代码

 /**
     * 批量上传图片 
     * 
     * @param filename 文件名
     * @param uploadNum 上传数量
     * @param mark
     * @param file 文件流
     * @param request
     * @param model
     * @return
     * @throws Exception
     */
    @RequestMapping(value = "/common/o_multiple_upload.do")
    public @ResponseBody
    String executeMultiple(String filename, Integer uploadNum, Boolean mark, HttpServletRequest request,
            HttpServletResponse response, ModelMap model) throws Exception
    {
        MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
        Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();
        // 存储fileUrl
        List<String> uploadPaths = new ArrayList<String>();
        String fileUrl = null;
        for (Map.Entry<String, MultipartFile> entity : fileMap.entrySet())
        {
            // 获取MulipartFile对象
            MultipartFile file = entity.getValue();
            WebErrors errors = validate(filename, file, request);
            if (errors.hasErrors())
            {
                model.addAttribute(ERROR, errors.getErrors().get(0));
                return RESULT_PAGE;
            }
            CmsSite site = CmsUtils.getSite(request);
            MarkConfig conf = site.getConfig().getMarkConfig();
            if (mark == null)
            {
                mark = conf.getOn();
            }
            // 上传文件名
            String origName = file.getOriginalFilename();
            String ext = FilenameUtils.getExtension(origName).toLowerCase(Locale.ENGLISH);
            try
            {
                if (site.getConfig().getUploadToDb())
                {
                    String dbFilePath = site.getConfig().getDbFileUri();
                    if (!StringUtils.isBlank(filename))
                    {
                        filename = filename.substring(dbFilePath.length());
                        if (mark)
                        {
                            File tempFile = mark(file, conf);
                            fileUrl = dbFileMng.storeByFilename(filename, new FileInputStream(tempFile));
                            tempFile.delete();
                        }
                        else
                        {
                            fileUrl = dbFileMng.storeByFilename(filename, file.getInputStream());
                        }
                    }
                    else
                    {
                        if (mark)
                        {
                            File tempFile = mark(file, conf);
                            fileUrl = dbFileMng.storeByExt(site.getUploadPath(), ext, new FileInputStream(tempFile));
                            tempFile.delete();
                        }
                        else
                        {
                            fileUrl = dbFileMng.storeByExt(site.getUploadPath(), ext, file.getInputStream());
                        }
                        // 加上访问地址
                        fileUrl = request.getContextPath() + dbFilePath + fileUrl;
                    }
                }
                else if (site.getUploadFtp() != null)
                {
                    Ftp ftp = site.getUploadFtp();
                    String ftpUrl = ftp.getUrl();
                    if (!StringUtils.isBlank(filename))
                    {
                        filename = filename.substring(ftpUrl.length());
                        if (mark)
                        {
                            File tempFile = mark(file, conf);
                            fileUrl = ftp.storeByFilename(filename, new FileInputStream(tempFile));
                            tempFile.delete();
                        }
                        else
                        {
                            fileUrl = ftp.storeByFilename(filename, file.getInputStream());
                        }
                    }
                    else
                    {
                        if (mark)
                        {
                            File tempFile = mark(file, conf);
                            fileUrl = ftp.storeByExt(site.getUploadPath(), ext, new FileInputStream(tempFile));
                            tempFile.delete();
                        }
                        else
                        {
                            fileUrl = ftp.storeByExt(site.getUploadPath(), ext, file.getInputStream());
                        }
                        // 加上url前缀
                        fileUrl = ftpUrl + fileUrl;
                    }
                }
                else
                {
                    String ctx = request.getContextPath();
                    if (!StringUtils.isBlank(filename))
                    {
                        filename = filename.substring(ctx.length());
                        if (mark)
                        {
                            File tempFile = mark(file, conf);
                            fileUrl = fileRepository.storeByFilename(filename, tempFile);
                            tempFile.delete();
                        }
                        else
                        {
                            fileUrl = fileRepository.storeByFilename(filename, file);
                        }
                    }
                    else
                    {
                        if (mark)
                        {
                            File tempFile = mark(file, conf);
                            fileUrl = fileRepository.storeByExt(site.getUploadPath(), ext, tempFile);
                            tempFile.delete();
                        }
                        else
                        {
                            fileUrl = fileRepository.storeByExt(site.getUploadPath(), ext, file);
                        }
                        // 加上部署路径
                        fileUrl = ctx + fileUrl;
                    }
                }

                fileMng.saveFileByPath(fileUrl, origName, false);
                uploadPaths.add(fileUrl);

                model.addAttribute("uploadNum", uploadNum);
            }
            catch (IllegalStateException e)
            {
                model.addAttribute(ERROR, e.getMessage());
                log.error("upload file error!", e);
            }
            catch (IOException e)
            {
                model.addAttribute(ERROR, e.getMessage());
                log.error("upload file error!", e);
            }
            catch (Exception e)
            {
                model.addAttribute(ERROR, e.getMessage());
                log.error("upload file error!", e);
            }
        }
        // model.addAttribute("uploadPaths", uploadPaths);
        return fileUrl;
    }

6、实现效果

ok 打完收工