JQuery的ajaxFileUpload的使用--实现ajax上传文件
HTML代码:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<input type="file" name="file"/><br>
<button class="btn btn-primary" type="button" >上传</button><br>
<img src="../img/9.jpg" class="img-circle" >
</body>
<script src="../js/jquery-1.7.1.min.js"></script>
<!--想要使用ajaxFileUpload插件必须引入这个js-->
<script src="../js/ajaxfileupload.js"></script>
<script>
$(()=>{
$('#uploadBtn').click(function () {
$.ajaxFileUpload({
url:'../uploadFile',
type:'post',
fileElementId: "file", //需要上传的文件域的ID，即<input type="file">的ID
dataType:'String',
success: function(result) {
alert(result);
$(".img-circle").attr("src","../upload/" + result);
}
})
})
})
</script>
</html>后台servlet代码:
@WebServlet(name = "UploadFileServlet",value = "/uploadFile")
//必须加此注解 重要!
@MultipartConfig
public class UploadFileServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Part part = request.getPart("file");
String header = part.getHeader("content-disposition");
//获得上传文件名
String path = header.substring(header.indexOf("filename=") + 10, header.length() - 1);
// 获取文件的真实路径
String realPath = this.getServletContext().getRealPath("/upload");
String newFileName = generateUploadFileName(getRealName(path));
File file = new File(realPath);
//文件夹不存在则创建
if (!file.exists()) {
file.mkdirs();
}
// 获取输入流
InputStream inputStream = part.getInputStream();
// 定义输出流
FileOutputStream outputStream = new FileOutputStream(new File(file, newFileName));
// 从输入流中读入数据并写到输出字节流中
int len = -1;
byte[] bytes = new byte[1024];
while ((len = inputStream.read(bytes)) != -1) {
outputStream.write(bytes, 0, len);
}
// 关闭资源
outputStream.close();
inputStream.close();
// 删除临时文件
part.delete();
//向服务器返回新文件名
response.getWriter().print(newFileName);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
public static String getRealName(String path) {
int index = path.lastIndexOf("\\");
if (index == -1) {
index = path.lastIndexOf("/");
}
return path.substring(index + 1);
}
//传入旧文件名，获得新的文件名
public static String generateUploadFileName(String name){
String suffixName = name.substring(name.lastIndexOf("."));
return System.currentTimeMillis() + "_" +(int)(Math.random() * 100000) +suffixName;
}
}