JQuery批量上传插件uploadify， springMVC实现

这个插件简单好用，下面进入正题：

 1.引入js和css

<link rel="stylesheet" type="text/css" href="css/uploadify.css">  
<script type="text/javascript" src="js/jquery.uploadify.min.js"></script> 

2.js代码

$("#uploadify1")
				.uploadify(
						{
							'uploader' : '${remoteURL}/informationManager/uploadFeedImgMultipart',//后台处理的请求
							'swf' : '${remoteURL}/static/uploadify/uploadify.swf',
							'cancelImg' : '${remoteURL}/static/uploadify/cancel.png',
							'buttonImg' : 'uploadify/buttonImg.png',
							'queueID' : 'fileQueue', 
							'fileDataName' : "files",
							'buttonText' : '上传',
							'fileObjName' : 'files',
							'auto' : false,
							'multi' : true,
							'simUploadLimit' : 999,
							'simUploadLimit' : 3,
							'fileExt' : '*.png;*.gif;*.jpg;*.bmp;*.jpeg;*.flv',
							'fileDesc' : '图片文件(*.png;*.gif;*.jpg;*.bmp;*.jpeg)',
							'onUploadStart' : function(file) {
								  $("#uploadify1").uploadify("settings", "formData", { 'type': 2}); 
								//在onUploadStart事件中，也就是上传之前，把参数写好传递到后台。  
							},
							onUploadSuccess : function(file, data, response) {
								var json = eval('(' + data + ')');
								var feedAttachIds = $("#feedAttachIds").val();
								feedAttachIds += json.feedAttachId + ":";
								var trs = [];
								trs
										.push('<li  id="'+json.feedAttachId+'" class="span2">');
								trs.push('<a href="#" class="thumbnail">');
								trs
										.push('<img src="${remoteURL}'+json.urlPath+'" alt="" />');
								trs.push('</a>');
								trs.push('<div class="actions">');
								trs
										.push('<a title="" href="www.hao123.com"><i class="icon-pencil icon-white"></i></a>');
								trs
										.push('<a title="" onClick="removeAttach('
												+ json.feedAttachId+ ')" href="#"><i class="icon-remove icon-white"></i></a>');
								trs.push('</div>');
								trs.push('</li>');
								$("#showDiv").append(trs.join(""));
								$("#feedAttachIds").val(feedAttachIds);
							},
						});
	});

3. html 代码

<div class="control-group">
<label class="control-label"></label>
<div class="controls">
<a href="javascript:$('#uploadify1').uploadify('upload','*')">开始上传</a>|
<a href="javascript:$('#uploadify1').uploadify('cancel','*')">取消上传</a>
</div>
</div>
<div class="control-group" id="fileQueue" style="width: 700px; height: 100px; border: 0px solid blue;"></div>

4.java代码

@RequestMapping(value = "/uploadFeedImgMultipart", method = RequestMethod.POST)
	public void upload(@RequestParam("files") MultipartFile[] files)
			throws Exception {
		MessageInfo messageInfo = new MessageInfo();
		for (int i = 0; i < files.length; i++) {
			Map<String, String> map = new HashMap<String, String>();
			Long fileSize = files[i].getSize();
			String name = files[i].getOriginalFilename();
			String path = request.getSession().getServletContext().getRealPath("/")+ "/uploads/feed/image/";
			System.out.println("path-----------:"+path);
			SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
			String ymd = sdf.format(new Date());
			path += ymd + "/";
			File servletFile = new File(path);
			if (!servletFile.exists()) {
				try {
					servletFile.mkdirs();
				} catch (Exception e) {
					e.printStackTrace();
				}
			}
			SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
			String url = df.format(new Date()) + new Random().nextInt(1000)+ "_" + name;
			FileUtil.createFile(files[i], path + "/" + url);
			map.put("filePath", "/uploads/feed/image/" + ymd + "/" + url);
			map.put("fileSize", String.valueOf(fileSize));
			map.put("fileName", name);
			map.put("code", "image");
			
			super.responseJson(response, messageInfo);
		}

5.注意：

queueID的值要和下面的div ID一致（本文是fileQueue

）