ajax upload file

 AJAX Uplad File 是个简单而美观的上传文件插件。

 

附件是从官方网站下的例子！

 

详细使用步骤如下:

 

1. 下载ajaxupload.js文件。 官方:http://valums.com/ajax-upload/

2. 在JSP中添加JS和CSS代码(如果你想自己定义样式)

 

	<script type="text/javascript" src="<%=request.getContextPath() %>/js/ajaxupload.js"></script>
	     <style type="text/css">
		.wrapper { width: 133px; margin: 0 auto; }
		div.button {
			height: 20px;	
			width: 83px;
			background: url(../../../images/button.png) 0 0;
			font-size: 12px; color: #C7D92C; text-align: center; padding-top: 0px;
		}
		div.button.hover {
			background: url(../../../images/button.png) 0 56px;
			color: #95A226;	
		}
			
	</style>

 

<table width="80%">
	<tr>
		<td>inovice:</td><td><div id="inovice" class="button">Upload</div></td>
	</tr>
	<tr>
		<td>COA:</td><td><div id="coa" class="button">Upload</div></td>
	</tr>
</table>

$(document).ready(function () {
	/* coa  : itemFile为action中处理上传时定义的file name   onSubmit: 点击上传的处理。 oncomplete: 上传完成后的信息处理*/
	var coa = $("#coa"), interval;
	new AjaxUpload(coa, {action:path + "/admin/book/item/upload/coa/" + $("#id").val(), name:"itemFile", onSubmit:function (file, ext) {
		coa.text("Uploading");
		this.disable();
		interval = window.setInterval(function () {
			var text = coa.text();
			if (text.length < 13) {
				coa.text(text + ".");
			} else {
				coa.text("Uploading");
			}
		}, 200);
	}, onComplete:function (file, response) {
		coa.text("Upload");
		window.clearInterval(interval);
		this.enable();
		if (response.search("success") == -1) {
			$("#coaText").text(file+" -->Error!");
		} else {
		   $("#coaText").text(file+" -->Success!");
		}
	}});

	/* inovice */
	var inovice = $("#inovice"), interval;
	new AjaxUpload(inovice, {action:path + "/admin/book/item/upload/inovice/" + $("#id").val(), name:"itemFile", onSubmit:function (file, ext) {
		inovice.text("Uploading");
		this.disable();
		interval = window.setInterval(function () {
			var text = inovice.text();
			if (text.length < 13) {
				inovice.text(text + ".");
			} else {
				inovice.text("Uploading");
			}
		}, 200);
	}, onComplete:function (file, response) {
		inovice.text("Upload");
		window.clearInterval(interval);
		this.enable();
		if (response.search("success") == -1) {
			$("#inoviceText").text(file+" -->Error!");
		} else {
		    $("#inoviceText").text(file+" -->Success!");
		}
	}});
});

 

2. 上传处理，我是用spring 自带的文件上传处理。

   *使用spring upload的上传功能首先需要在appliaction-context.xml中加入以下

	<!-- upload file -->
	<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
		<!--property name="maxUploadSize">
			<value>10485760</value>
		</property>-->
		<property name="maxInMemorySize">
			<value>20480</value>
		</property>
		<property name="defaultEncoding">
			<value>UTF-8</value>
		</property>
	</bean>

 

action中代码处理

     

@RequestMapping("/item/upload/{type}/{id}")
	public void uploadFile(@PathVariable("type") String type, @PathVariable("id") Integer id, HttpServletRequest request,	HttpServletResponse response) {
		
		/* parse upload file */
		MultipartHttpServletRequest mhs = (MultipartHttpServletRequest) request;
		MultipartFile mf = mhs.getFile("itemFile");

		String storePath = globalSettingService.getGlobalSetting().getUploadFilePath();
		/* create stroeFolder */
		File storeFileFolder = new File(storePath);
		if (!checkStoreFolder(storeFileFolder, response)) {
			MessageUtils.outputJSONResult("noStorePath", response);
			return;
		}
		
		/* upload file */
		String uploadFilePath = FilePathHelper.uploadFileToStorePath(mf, storeFileFolder);
		if ("error".equals(uploadFilePath)) {
			MessageUtils.outputJSONResult("error", response);
			return;
		}
		
		BookItem o = buildBookItem(type, uploadFilePath, id);
		bookService.saveBookItem(o);
		MessageUtils.outputJSONResult("success", response);
	}



/**
	 * upload file to disk path
	 * @param mf MultipartFile 
	 * @return upload file absolute path
	 * @throws Exception 
	 * @throws Exception if occur error throw Exception
	 */
	public static String uploadFileToStorePath(MultipartFile mf, File storeFile) {
		if (null == storeFile || !storeFile.isDirectory()) {return "error";}
		
		CommonsMultipartFile cmf = (CommonsMultipartFile)mf;
		DiskFileItem fileItem = (DiskFileItem) cmf.getFileItem();
		String fileType = StringUtils.substringAfterLast(fileItem.getName(), ".");
		String fileName = generateFileName(fileType);
		File storeNewFile = new File(storeFile.getAbsolutePath()+File.separator+fileName);
		try {
			fileItem.write(storeNewFile);
		} catch (Exception e) {
			e.printStackTrace();
			return null;
		}
		fileItem.delete();
		return fileName;
		//return storeNewFile.getAbsolutePath();
	}

 

评论

3 楼 HFLdragon 2013-06-17  

下来学习一下

2 楼 zhangjq5 2012-06-20  

中文名乱码……

1 楼 yw2325 2011-08-16  

ie都不支持