javaWeb中使用ajax上传文件

时间:2023-03-10 04:33:20
javaWeb中使用ajax上传文件

javaWeb上传图片

上传文件所必要的两个jar包:commons-fileupload.jar、commons-io.jar。

jar包下载:github路径

核心代码:

 String withPath = req.getServletContext().getRealPath("/");//获取网站的URI根路径(网站资源路径,存内容到这里可以通过浏览器访问)
String webPath = req.getContextPath();//获取网站的URL根路径(访问网站跟路径)
DiskFileItemFactory factory = new DiskFileItemFactory();
factory.setSizeThreshold(2048 * 500);
File file = new File(withPath + "\\temp");// 临时存储文件位置
String path = withPath + "\\upload";// 文件保存位置
factory.setRepository(file);
ServletFileUpload upload = new ServletFileUpload(factory);
upload.setSizeMax(1024 * 1024);// 最大的文件文1M(1024KB)
List<FileItem> items = upload.parseRequest(req);
for (FileItem item : items) {
// 如果只上传一个文件那么可以不用循环
System.out.println("for---");
if (item.isFormField()) {
// 上传的不是文件域
jo.put("status", "error");
jo.put("msg", "上传图片失败");
System.out.println(
item.getFieldName() + ":" + item.getString());
}
else {
String fileName = item.getName();// 文件名(包括扩展名)
System.out.println("文件名为:" + fileName);
jo.put("status", "true");
InputStream in = item.getInputStream();
byte[] buffer = new byte[1024];
int len = 0;
String allFileName = path + "\\" + fileName;
OutputStream os = new FileOutputStream(allFileName);
while ((len = in.read(buffer)) != -1) {
os.write(buffer, 0, len);
}
os.close();
in.close();
jo.put("status", "true");
jo.put("msg", "上传图片成功");
jo.put("imgUrl", webPath + "/upload/" + fileName);
}
}

2.html

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>上传文件</title>
<script type="text/javascript" src="<%=path%>/static/lib/myUtils.js"></script>
<script type="text/javascript" src="<%=path%>/static/js/jquery-1.11.1.js"></script>
</head>
<body>
<input type="file"/>
<div class="msg"></div>
<script type="text/javascript">
$(document).ready(function(){
var img_formats = "jpeg,jpg,bmp,png,gif,ico,tiff,pcx,tga,exif,fpx,svg,psd,cdr,pcd,dxf,ufo,eps,ai,raw,wmf";
var file = $("input[type='file']");
file.change(function(){
var files=this.files;
var formData=new FormData();
formData.append('files',files[0]);
var img_format = myUtils.file_format(files[0].name);
console.log(files[0].name);
if(img_format.length > 0){
if(img_formats.indexOf(img_format) >= 0){
var img = myUtils.getFileUrl(files[0]);
$.ajax({
url: "<%=path%>/uploadServlet",
type: "POST",
data: formData,
dataType:"json",
/**
*必须false才会自动加上正确的Content-Type
*/
contentType: false,
/**
* 必须false才会避开jQuery对 formdata 的默认处理
* XMLHttpRequest会对 formdata 进行正确的处理
*/
processData: false,
success: function (data) {
console.log(data);
if (data.status == "true") {
alert(data.msg);
$(".msg").html("<img src='"+data.imgUrl+"'/>");
}
if (data.status == "error") {
alert(data.msg);
}
$("#imgWait").hide();
},
error: function () {
alert("上传失败!");
$("#imgWait").hide();
}
});
}else{
$(".msg").text("请上传图片文件");//不是图片文件
}
}else{
$(".msg").text("上传的不是一个有效的文件");//文件没有后缀名
}
});
});
</script>
</body>
</html>

注意:上传图片的位置要放在->网站资源路径;而不是本地的资源路径,否则上传之后无法在浏览器中预览图片切记!!!

本人小白,各位大神有好的建议多多提点,一起学习共同进步