ajax 实现文件上传

阅读更多

  ajax 由于其无法直接发送表达形式的数据，因此不能直接使用ajax实现无刷新附件上传，但是可以通过其包装实现这一功能。


引入jquery 和 包装类

html中引用

  请尊重知识，请尊重原创 更多资料参考请见  http://www.cezuwang.com/listFilm?page=1&areaId=906&filmTypeId=1

上传js函数

function uploadFile() {
	
	$.ajaxFileUpload({
				url : '${pageContext.request.contextPath}/service/filmBaseInfo/uploadImage',
				secureuri : false,
				fileElementId : 'imagesfile',
				dataType : 'json',
				error : function(data, status, e) {
					alert(data);
				},
				success : function(data, status) {
					console.log(data);
				}
			});
}

  请尊重知识，请尊重原创 更多资料参考请见  http://www.cezuwang.com/listFilm?page=1&areaId=906&filmTypeId=1
spring mvc 处接受附件

@RequestMapping(value="/service/filmBaseInfo/uploadImage", method =RequestMethod.POST)
	@ResponseBody
	public Result uploadCardImage(HttpServletRequest request, HttpServletResponse response, MultipartFile file) throws Exception{
		Result result = null;
		
		AppServiceLog.info("begin upload the  film image,and the file is {} ", file);
		
		result = fdfsUploadFileManager.fdfsUploadImage(file, AttachmentTypeEnum.USER, 120,120);
		
		return result;
	}

使用以上方式即可实现无刷新ajax附加上传。 好了，现在来看看 ajaxfileupload.js是如何实现的

jQuery.extend({
	

    createUploadIframe: function(id, uri)
	{
			//create frame
            var frameId = 'jUploadFrame' + id;
            var iframeHtml = '