form enctype="multipart/form-data" ajax 文件上传

<form method="post" enctype="multipart/form-data" id="resource"> 
	<table border="1" width="100%" >
		<th colspan="3">资源上传</th>
		<tr height="28px">
			<td width="12%" align="right">文 件 名:</td>
			<td width="68%" >
				<input class="zxui-textbox" style="300px" id="title"> 
			</td>
			<td rowspan="3">
				<div style="height: 380px">
					<input type="file" name="files"><br>
				</div>
			</td>
		</tr>
		<tr height="28px">
			<td width="12%" align="right">文件类型:</td>
			<td width="68%" >
				<select id="cc" class="zxui-combobox" name="dept" style="200px;">   
				    <option value="0">书籍</option>   
				    <option value="1">音频</option>   
				    <option value="2">视频</option>   
				</select>  
			</td>
		</tr>
		<tr height="28px">
			<td width="12%" align="right">备 注:</td>
			<td width="68%" >
				<input class="zxui-textbox" style="300px" id="remark"> 
			</td>
		</tr>
		<tr height="28px">
			<td width="100%" colspan="3" align="center">
				<a id="fileUpload" onclick="subResource()" class="zxui-linkbutton" data-options="iconCls:'downloadIcon'">上传</a>  
			
			</td>
		</tr>
	</table>
</form>

  js:

function subResource(){
	 var remark=$('#remark').val();
	 var title=$('#title').val();
	 var files = $('#files').val();

     //调用apicontroller后台action方法,将form数据传递给后台处理。contentType必须设置为false,否则chrome和firefox不兼容
     if (files != ''& remark != '' & title != '') {
    	 var formData = new FormData($("#resource")[0]);
    	 formData.append("remark",remark);
    	 formData.append("title",title);
    	 
         $.ajax({
             url: "..../resources/upload.pt",
             type: 'POST',
             data: formData,
             async: false,
             cache: false,
             contentType: false,
             processData: false,
             success: function (returnInfo) {
            	if (returnInfo==true) {
            		 $.messager.alert('提示:','上传成功!');    
            		 $('#fileUpload').linkbutton('disable');
    			} else {
    				$.messager.alert('提示:','上传失败!请重新上传!');   
    			}
             },
             error: function (returnInfo) {
                 //上传失败时显示上传失败信息
                 //document.getElementById('uploadInfo').innerHTML = "<span style='color:Red'>" + returnInfo + "</span>";
             }
         });
	  } else {
		  $.messager.alert('提示:','请完善上传资源或信息!');  	
	  }
}

  后台:

	@RequestMapping("upload")
	@ResponseBody
	public boolean upload(MultipartFile files,String remark,String title) throws Exception, IOException{
		MultipartFile ufile=files;
		String oname=ufile.getOriginalFilename();
		String name=ufile.getName();
		ServletContext context=this.getRequest().getSession().getServletContext();
		String realname=context.getRealPath("/upload");
		File nfile=new File(realname+"/"+UUID.randomUUID().toString()+oname);
		ufile.transferTo(nfile);
		
		Dmp dmp =new BaseDmp();
		String id = CodeUtil.getTimeSequence(30);
		UserInfo user = this.getUserInfo();
		String userid = user.getUserid();
		String usname = user.getUsername();
		dmp.put("id", id);
		dmp.put("creater", usname);
		dmp.put("createrid", userid);
		dmp.put("address", String.valueOf(nfile));
		dmp.put("remark", remark);
		dmp.put("title", title);		
		int i =reService.in_resources(dmp);
		boolean bo = false;
		if (i>0) {
			bo = true;
		}
		return bo;
	}

  

原文地址:https://www.cnblogs.com/ckxlovejava/p/8796839.html