SpringMVC+ajaxfileupload+ajax文件上传

 

升级版地址：https://blog.csdn.net/u012547633/article/details/80198561

------------------------------jsp页面--------------------------------

 

<script type="text/javascript" src="<%=basePath%>/view/common/easyui/ajaxfileupload.js"></script>
  <script type="text/javascript">
    //全局参数
	var attachment_page_url = "admin/attachment/manager/page";
	var basepath = '<%=basePath%>';
		//单个上传
	var uploadUrl = basepath+"portal/attachment/uploadFile";
  </script>

 

 

 

 

<span style="white-space:pre">	</span><input type="file" id="uploadFileId2" name="uploadFileName" />
<span style="white-space:pre">	</span><input type="button" id="upload" value="上传" />
<form id="uploadId">
<span style="white-space:pre">	</span><input type="text" id="resultValue" name="resultValue"  />
</form>

-----------------------------js文件--------------------------------------------------

 

 

/**
 * 验证上传文件框里是否为null
 */
$(function () {
    $("#upload").click(function () {
        if ($("#uploadFileId2").val().length > 0) {
            ajaxFileUpload();
        }
        else {
            $.messager.alert("请选择文件！");
        }
    });
});

/**
 * ajax异步提交文件
 *   将保存的文件信息Id返回
 * @returns {Boolean}
 */
function ajaxFileUpload() {
    $.ajaxFileUpload({
            url: uploadUrl, //用于文件上传的服务器端请求地址
            secureuri: false, //一般设置为false
            fileElementId: 'uploadFileId2', //文件上传空间的id属性  <input type="file" id="file" name="file" />
            dataType: 'json', //返回值类型 一般设置为json
            type:"post",
            success: function (data,status){
	        	$('#uploadId').form('load',{
	        		resultValue:data.result.id,
		        });
            },
        });
    return false;
}

---------------------------------------------------------------@Controller--------------------------------------------------------

 

 

@RequestMapping("portal/attachment/uploadFile")
	@ResponseBody //ajax请求必填
	@MenuO(name="上传文件",code="attachment-uploadFile",parent="attachment-manager",type = Constant.AFFILIATED)
	public Map<String, Object> uploadFile(HttpServletRequest request,HttpServletResponse response) throws Exception {
		Map<String, Object> map = new HashMap<String,Object>();
		AttachmentVo vo = new AttachmentVo();
		
		//取得上传的文件
        MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
       
        CommonsMultipartFile file = (CommonsMultipartFile) multipartRequest.getFile("uploadFileName");
//        response.setContentType("text/html");
//        response.setCharacterEncoding("UTF-8");
        //得到文件名称
        String realFileName = file.getOriginalFilename();
        String suffix = realFileName.substring(realFileName.indexOf("."), realFileName.length());
        //判断文件类型是否可用和文件类型
        Map<String, Object> attMap = StringTool.attachmentType(suffix);
        if(!(Boolean) attMap.get("flag")) {
        	map.put("result", "{file.type.error}");
        	Fail(map);
        	return map;
        }
        String fileRealPath = request.getSession().getServletContext().getRealPath("/")+"WEB-INF\\upload\\"; 
        String webPath = "WEB-INF/upload/";
    	String randomName = FileHelper.getRandomFileName(suffix);
    	
    	//判断文件夹是否存在
    	File targerFile = new File(fileRealPath);					
		//判断是否存在目录
		if(!targerFile.exists()) {
			targerFile.mkdirs();
		} 
    	
        //保存文件
        File uploadFile = new File(fileRealPath+randomName); 
        FileCopyUtils.copy(file.getBytes(), uploadFile);
        
        //配置文件实体信息
        vo.setaTypeId(Long.valueOf(attMap.get("type").toString()));//文件类型
        vo.setaPath(webPath+randomName);//路径
        vo.setaName(randomName);//文件名
        Login login = (Login)request.getSession().getAttribute(Constant.LOGIN_SESSION);
        vo.setUploadUser(login.getId());
        Attachment result = attachmentService.addOrUpdate(vo);
        //返回上传信息
		map.put("result", new AttachmentVo(result));
		Success(map);
		return map;
	}
	
}

 

注意：

 

ajaxfileupload.js 这个js比较重要，一定要

handleError: function( s, xhr, status, e ) <span style="white-space:pre">		</span>{
// If a local callback was specified, fire it
if ( s.error ) {
s.error.call( s.context || s, xhr, status, e );
}
// Fire the global callback
if ( s.global ) {
(s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] );
}
},

 

这个是在ajaxfileupload.js 爆出jQuery.handleError(s, xml, status, e);为未定义方法时
需要把这个方法加载到ajaxfileupload.js中；


======================================2014-09-25记录，望大家指正和咨询</span>