前几天在用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为图片服务器访问名