今天在做一个批量上传图片的需求,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、实现效果