删除文件的表单要加入如下enctype属性:
<form id="upload" enctype="multipart/form-data"><!--//由于使用ajax上传,不用加action和method属性-->
要实现无刷新上传文件首先要阻止submit按钮提交表单,在submit按钮添加onclick属性:
<button type="submit" οnclick="return false">登录</button><!-- 用input也可以 -->
这样写这个提交按钮就失效了。
接着需要在按下提交按钮时执行ajax操作,将标签改为:
<button type="submit" οnclick="return upload()">登录</button><!-- 用input也可以 -->
js函数如下:
function upload()
{
//提交前先对文件进行检查,<input id="file" type="file">
var file = $("#file")[0].files;//获取上传控件中的文件列表
if(file.length == 0){//没有指定文件
alert("请选择文件");
}
else if(file.length>1){//文件多于一个,这个根据具体需求,我这里限定只能传一个
alert("只能上传一个文件");
}
else{
file = file[0];//确定只有一个文件了,取得这个文件对象
if(file.type! = "image/png"&&file.type!="image/jpeg"&&file.type!="image/gif"){//检查文件格式,根据具体需求
alert("文件格式错误");
}
else if(file.size>1024*500){//检查文件大小,这里限定了文件大小不超过500KB
alert('文件太大');
}
else{
var formData=new FormData($('#upload')[0]);//取得表单的所有数据
document.body.append($("<div id='shadow' style='width:100%;height:100%;"+
"position:fixed;top:0px;left:0px;background-color:rgba(100,100,100,0.3);"+
"z-index:"+Number.MAX_SAFE_INTEGER+"'></div>")[0]);
//执行ajax之前在当前页面加入一个遮罩层,表示正在上传
$.ajax({
url:"../Upload",
method:"post",
timeout:5000,
data:formData,
processData:false,
contentType:false,//这两行是上传文件时才需要加的
success:function(data){
if(data=="ok"){
//上传成功
}
else{
alert(data);//打印服务器返回的错误信息
}
},
error:function(data){
alert("上传失败");
},
complete:function(){
$("#shadow").remove();//结束时移除遮罩层
}
});
}
}
return false;//还记得它的作用吗?阻止submit按钮提交表单
};
servlet代码:
servlet需要添加一个注解@MultipartConfig,也可以用web.xml配置,这里不做介绍
@WebServlet("/Upload")
@MultipartConfig
public class UploadServlet extends HttpServlet {
................
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
final Part filePart = request.getPart("file");
if (filePart == null) {
response.getWriter().print("未指定文件");
return;
}
if (filePart.getSize() > 1024 * 500) {
response.getWriter().print("文件太大");
return;
}
String filename = filePart.getSubmittedFileName();//获取上传文件名
String realPath = this.getServletContext().getRealPath("/upload");
//获取web目录的真实物理路径,文件将保存在upload文件夹下
File dir=new File(realPath);
if(!dir.exist()){
dir.mkdir();//如果目录不存在,则创建
}
filePart.write(realPath + "/" + filename);//将文件写入磁盘
response.getWriter().print("ok");
}
.................
}