ajaxfileupload带参数上传文件

前几天在用ajaxfileupload上传文件时发现ajaxfileupload无法带参传递，于是我从github上找到了一个现成的可以带参传递的ajaxfileupload，并学习了ajaxfileupload怎么上传文件。

可以带参传递的ajaxfileupload的github地址：https://github.com/carlcarl/AjaxFileUpload

Html

<!-- form表单的enctype属性必须设置为multipart/form-data。 -->
<form class="am-form tjlanmu" enctype="multipart/form-data">
    <select name="categoryName" id="categoryId" data-am-selected="{btnWidth: 90, btnSize: 'sm', btnStyle: 'default'}">
        	<c:forEach var="c" items="${categoryList }">
              <option value="${c.id }">${c.categoryName }</option>
          	</c:forEach>
    </select>
    <input name="photo" id="imageFile1" type="file"><!-- id必须唯一，Name必须有 -->
    <button id="addProjectButton" type="button">提交</button>
</form>

form表单的enctype属性必须设置为multipart/form-data。

上传文件的input的id必须唯一，name属性必须有。

ajax

//添加project
$("#addProjectButton").click(function(){
	var project = {
		   "category_id":$("#categoryId option:selected")[0].value
				};
	$.ajaxFileUpload({
		    url:"addProject.action",//用于文件上传的服务器端请求地址
			secureuri:false,//是否需要安全协议，一般设置为false
			data:project,//传递的参数
			fileElementId:"imageFile1",//文件上传域的ID
			dataType:"JSON",//返回值类型
			success:function(data,status){
				//服务器成功响应处理函数
				if(data==1){
					alert("添加成功");
					window.location='/vitae/projectInformation.action';
				}else{
					alert(data);
					alert("添加失败");
				}
			 },
			 error:function(data,status,e){
			    //服务器响应失败处理函数
				//e 异常信息
				alert("error");
			 }
	})
});

ajaxfileupload的fileElementId是上传文件的input的id。

Controller

/**
	 * 添加project
	 * */
	@RequestMapping("/addProject.action")
	@ResponseBody
	public String addProject(int category_id,@RequestParam("photo") MultipartFile uploadfile){
        String dirpath = "E:/viate/uploadImage/";//上传文件保存的地址，最好先创建好
		Project project = new Project();
		System.out.println(category_id);
		project.setCategory_id(category_id);
			//判断所上传文件是否存在
			if(!uploadfile.isEmpty()){
				//获取上传文件的原始名称
				String originalFilename = uploadfile.getOriginalFilename();
				//设置上传文件的保存地址目录
				File filePath = new File(dirPath);
				//如果保存文件的地址不存在，就先创建目录
				if(!filePath.exists())filePath.mkdirs();
				//使用UUID重新命名上传的文件名称（uuid_原始文件名称）
				String newFilename = UUID.randomUUID()+"_"+originalFilename;
				try {
					//使用MultipartFile接口的方法完成文件上传到指定位置
					uploadfile.transferTo(new File(dirPath+newFilename));
				} catch (IllegalStateException e) {
					// TODO Auto-generated catch block
					e.printStackTrace();
				} catch (IOException e) {
					// TODO Auto-generated catch block
					e.printStackTrace();
				}
				project.setPhoto("/uploadImages/"+newFilename);
				projectService.addProject(project);
				return "1";
		}
		return "0";
	}

 MultipartFile uploadfile就是接收上传的文件，@RequestParam("photo")的photo是上传文件input的name

本人用的是tomcat，要在tomcat的server.xml中的<Host></Host>之间加上图片服务器即：

               <Context docBase="E:/viate/uploadImage/" reloadable="true" path="/uploadImages"/>

其中docBase为文件保存路径，path为图片服务器访问名