今天在做一个批量上传图片的需求，google下，觉得uploadify在jquery的上传控件还是挺不错，特写下怎么使用。
1、下载资源包，2.1.0整理，免费分享地址
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 @ResponseBodyString 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();// 存储fileUrlList<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 打完收工
两粒种子，一片森林。
