之前一直用ajaxfileupload上传文件,但是无法解决跨域问题,用form表单提交文件又无法异步上传
现在用jqueryform就可以完美解决上面的问题
页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.11.2.min.js"></script>
<script src="jquery.form.js"></script>
<script src="test.js"></script>
</head>
<body>
<form id="form_file" method="post" enctype="multipart/form-data">
<input type="file" id="file_img" name="file" capture="camera" class=""/>
</form>
</body>
</html>
test.js代码
$(function () {
$("#file_img").bind("change", function(){
uploadFile();
});
});
//上传图片
function uploadFile() {
alert(1)
$("#form_file").attr("action", "/xinqiqiu/imgUploadSer");
$("#form_file").ajaxSubmit(function(message) {
console.log(message);
var jsonresult=JSON.parse(message);
var imgurl=jsonresult.RESULT_DATA.IMGSRC;
alert(imgurl)
});
}
后台servlet代码
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
DiskFileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload sfu = new ServletFileUpload(factory);
sfu.setFileSizeMax(1024 * 1024);
//每个表单域中数据会封装到一个对应的FileItem对象上
try {
List<FileItem> items = sfu.parseRequest(request);
//区分表单域
for (int i = 0; i < items.size(); i++) {
FileItem item = items.get(i);
//isFormField为true,表示这不是文件上传表单域
if (!item.isFormField()) {
ImageDomain imageDomain = new ImageDomain(item);
ImageHandler ih = new ImageHandler();
String pimg = ih.disposeImage(imageDomain);
}
}
}catch(Exception e){
log.error("上传图片", e);
out.print(ss.packageError("上传图片失败"));
}finally{
out.flush();
out.close();
}
}
ImageDomain为图片模型类
ImageHandler为上传图片操作类
具体就不在展开。