ajax与servlet交互文件
在java web开发工程中客户端与后台交互数据是经常的操作,而文件的交互亦是十分常见。本文展示html 前端页面通过 ajax上传文件到servlet的过程。
前端HTML部分:
<div class="search-box">
<input type="file" id="upload-file" accept="image/jpg" >
<div class="upImage">本地上传</div>
<input type="text" value="图片URL" id="pic-url" name="pic-url" />
<input type="submit" value="检测" id="submit"/>
</div>
。。。
JS ajax部分代码:
$("#pic-url").val('');//清空图片URL输入框
var item = document.getElementById("upload-file").files[0];
var formData = new FormData();
formData.append("uploadItem",item);
$.ajax({
url : 'showservlet',
type : 'POST',
data : formData,
processData : false, //必须false才会避开jQuery对 formdata 的默认处理
contentType : false, //必须false才会自动加上正确的Content-Type
success : function(res) { ...
},
error : function(xmlHttp, status, errMsg) {
alert("数据加载失败");
}
});
后台Servlet处理部分代码:
Boolean flag = false;
File storeFile = null;
String filePath = "";
DiskFileItemFactory factory = new DiskFileItemFactory();
factory.setSizeThreshold(MEMORY_THRESHOLD);
factory.setRepository(new File(System.getProperty("java.io.tmpdir")));
ServletFileUpload upload = new ServletFileUpload(factory);
// 设置最大文件上传值
upload.setFileSizeMax(MAX_FILE_SIZE);
// 设置最大请求值 (包含文件和表单数据)
upload.setSizeMax(MAX_REQUEST_SIZE);
// 构造临时路径来存储上传的文件
// 这个路径相对当前应用的目录
String uploadPath = getServletContext().getRealPath("./") + File.separator + UPLOAD_DIRECTORY;
File uploadDir = new File(uploadPath);
if (!uploadDir.exists()) {
uploadDir.mkdir();
}
List<FileItem> items;
try {
items = upload.parseRequest(request);
if (items != null && items.size() > 0) {
for(FileItem item : items) {
if(!item.isFormField() ) {
String fileName = new File(item.getName()).getName();
filePath = uploadPath + File.separator + fileName;
storeFile = new File(filePath);
// 在控制台输出文件的上传路径
System.out.println(filePath);
item.write(storeFile);
flag = true;
}
}
}
} catch (Exception e) {
e.printStackTrace();
flag = false;
}
OK,分享就到这里了,技术的进步需要勤加练习哦!
望你我每天进步一点,Just Do IT!