一、通过Servlet3.0和传统的AJAX实现图片上传和预览
此方法也适用于带图片的表单提交
上传时预览图片
点击上传按钮,上传到相应的文件中
1.JSP页面代码(通过ajax将图片传到后台,并进行图片预览)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="jquery/jquery-3.3.1.js"></script>
<script type="text/javascript" src="bootstrap/bootstrap.js"></script>
<link href="bootstrap/bootstrap.css" rel="stylesheet">
<title>AJAX图片上传及预览</title>
<script>
$(document).ready(function() {
$("#previewImage").hide();
$("#imageFile").change(function() {
var fileReader = new FileReader();
fileReader.onload = function(e) {
$("#previewImage").show();
$("#previewImage").attr('src',e.target.result);
}
var imageFile = this.files[0];
fileReader.readAsDataURL(imageFile);
});
$("#uploadButton").click(
function() {
var xhr;
if(window.XMLHttpRequest){
//IE7+,Firefox,Chrome,Opera,Safari浏览器执行的代码
xhr = new XMLHttpRequest();
}else{
//IE6,IE5浏览器执行的代码
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("post","ajaxFileUpload");
xhr.onreadystatechange = function() {
if(xhr.readyState == 4){
if(xhr.status == 200){
alert("图片上传成功");
}else{
alert("图片上传失败")
}
}
};
var imageFile = $("#imageFile")[0].files[0];
var username=$("#userName").val();
/* FormData对象用以将数据编译成键值对,以便用XMLHttpRequest来发送数据。其主要用于发送表单数据,
但亦可用于发送带键数据(keyed data),而独立于表单使用。如果表单enctype属性设为multipart/form-data ,
则会使用表单的submit()方法来发送数据,从而,发送数据具有同样形式。 */
//通过FormData构造函数创建一个空对象
var myForm = new FormData();
//通过append()方法来追加数据
myForm.append("userName",username);
myForm.append("imageFile", imageFile);
xhr.send(myForm);
});
});
</script>
</head>
<body style="margin: 0 auto; text-align: center;">
<img id="previewImage" alt="预览图" width="200px"
height="200px" />
<!-- <p id="previewImage"></p> -->
<form action="fileUpload" enctype="multipart/form-data" method="post">
<label for="userName">用户名</label>
<input type="text" id="userName" name="userName" />
<label for="imageFile">上传图片</label>
<input type="file" id="imageFile" name="imageFile" accept="image/jpeg" />
<button type="button" id="uploadButton" class="btn btn-primary">上传</button>
</form>
</body>
</html>
2.Servlet代码(将文件写入到相应的文件中)
package com.ajaxuploadtest.app;
import java.io.IOException;
import java.util.Date;
import java.util.UUID;
import javax.servlet.ServletException;
import javax.servlet.annotation.MultipartConfig;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.Part;
/*@MultipartConfig标注可用来设置Servlet处理上传文件的相关信息,如果没有设置属性则取默认值
可用属性如下:
1:fileSizeThreshold:整数值设置,若上传文件大小超过设置门槛,则先放入缓存文件,默认值为0;
2:location:字符串设置,设置写入文件时的目录,如果设置这个属性值,则缓存文件就是写到指定的目录,也可搭配Part的write()方法使用,默认为空字符串。
3:maxFileSize:限制上传文件大小,默认值为-1L,表示无限制
4:maxRequestSize:限制multipart/form-data请求个数,默认值为-1L,表示不限制个数
*/
@MultipartConfig(location = "E:\\uploads", fileSizeThreshold = 1024 * 1024, maxFileSize = 1024 * 1024
* 5, maxRequestSize = 1024 * 1024 * 5 * 5)
@WebServlet(urlPatterns = { "/ajaxFileUpload" }, loadOnStartup = 1)
public class AjaxFileUpload extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// TODO Auto-generated method stub
request.setCharacterEncoding("UTF-8");
/*
* UUID.randomUUID().toString()是javaJDK提供的一个自动生成主键的方法。 UUID(Universally Unique
* Identifier)全局唯一标识符,是指在一台机器上生成的数字,它保证对在同一时空中的所有机器都是唯一的,是由一个十六位的数字组成,表现出来的 形式。
* 由以下几部分的组合:当前日期和时间(UUID的第一个部分与时间有关,如果你在生成一个UUID之后,过几秒又生成一个UUID,则第一个部分不
* 同,其余相同),时钟序列,全局唯一的IEEE机器识别号(如果有网卡,从网卡获得,没有网卡以其他方式获得), UUID的唯一缺陷在于生成的结果串会比较长。
*/
String fileName = UUID.randomUUID().toString() + ".jpg";
// Servlet3.0新增了request.getParts()/getPart(String filename)
// api,用于获取使用multipart/form-data格式传递的http请求的请求体,通常用于获取上传文件。
Part part = request.getPart("imageFile");
System.out.println("fileName:" + fileName);
part.write(fileName);
response.setContentType("application/json;charset=utf-8");
String s = "{\"result\":\"success\"}";
response.getWriter().print(s);
}
}
一、jQuery AJAX实现图片上传和预览
1.JSP代码
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!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=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="jquery/jquery-3.3.1.js"></script>
<link href="bootstrap/bootstrap.css" rel="stylesheet">
<script type="text/javascript">
function doUpload() {
var formData = new FormData($("#uploadForm")[0]);//构造FormData对象
$.ajax({
url : 'ajaxFileUpload',//接受请求的Servlet地址
type : 'POST',
data : formData,
async : false,//同步请求
cache : false,//不缓存页面
contentType : false,//当form以multipart/form-data方式上传文件时,需要设置为false
processData : false,//如果要发送Dom树信息或其他不需要转换的信息,请设置为false
success : function(url) {
$("#img_test").attr('src', url);//上传成功后,把服务器获取到的图片路径绑定到img标签是src属性上
},
error : function(returndata) {
alert(returndata);
}
});
}
//如果想要用户一改变选择的文件就出现预览图,可以采取如下方法
/* $(function() {
$("#file").onchange(){
doUpload();
};
}); */
</script>
</head>
<body style="margin: 0 auto; text-align: center;">
<form id="uploadForm">
<label for="file">图片:</label> <input type="file" name="file" id="file" /><br>
<input type="button" value="上传" onclick="doUpload()"
class="btn btn-primary" />
</form>
<img id="img_test" alt="" width="200px" height="300px" />
</body>
</html>
2.Servlet代码
package com.ajaxuploadtest.app;
import java.io.File;
import java.io.IOException;
import java.util.List;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileItemFactory;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
/**
* Servlet implementation class AjaxUploadServelt
*/
@WebServlet("/ajaxFileUpload")
public class AjaxUpload extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public AjaxUpload() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.getWriter().append("Served at: ").append(request.getContextPath());
}
private String saveFile(FileItem item) {
//此处获取的是文件的全路径
String fileFullName = item.getName();
File fileInfo = new File(fileFullName);
String fileName = fileInfo.getName();
//String fileName = fileFullName.substring(fileFullName.lastIndexOf("\\") + 1);
//获取当前项目的根目录
String root = this.getServletContext().getRealPath("//");
//String root ="E:\\eclipse-workspace\\JAVAWeb\\AjaxUploadTest2\\WebContent";
//保存路径为当前工程根目录的upload文件夹
File savePath = new File(root+File.separator+"upload");
//如果路径不存在,就新建目录
if(!savePath.exists()) {
savePath.mkdir();
}
File uploadedFile = new File(savePath+File.separator+fileName);
try {
item.write(uploadedFile);//写入
//文件的服务路径:工程目录+upload+文件名
return this.getServletContext().getContextPath()+"//upload//"+fileName;
} catch (Exception e) {
// TODO Auto-generated catch block
System.out.println("保存文件失败");
return "";
}
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
//借助工具解析
//判断传入的是否是文件类型
boolean isMultipart =ServletFileUpload.isMultipartContent(request);
if(isMultipart){
//创建FileItem对象工厂
DiskFileItemFactory factory = new DiskFileItemFactory();
// 获取Servlet上下文
ServletContext servletContext = this.getServletConfig().getServletContext();
//获取临时文件夹
File repository = (File) servletContext.getAttribute("javax.servlet.context.tempdir");
factory.setRepository(repository);
//创建文件上传处理器
ServletFileUpload upload = new ServletFileUpload((FileItemFactory) factory);
//解决中文乱码参数
upload.setHeaderEncoding("utf-8");
// 解析request获取上传的参数
// 使用ServletFileUpload解析器解析上传数据,解析结果返回的是一个List<FileItem>集合,每一个FileItem对应一个Form表单的输入项
List<FileItem> items = null;
try {
items = upload.parseRequest(request);
} catch (FileUploadException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
// 解决上传文件名的中文乱码
upload.setHeaderEncoding("UTF-8");
String filePath = "";
// 处理参数
for(FileItem item:items) {
// 判断是否为Form的表单域,即判断是否为普通的数据,若不是则为文件。
if(item.isFormField()) {
//对表单域数据的处理,若仅上传文件,此处可不必关注
String name = item.getFieldName();
// 解决普通输入项的数据的中文乱码问题
String value = item.getString("UTF-8");
}else {
//对文件数据进行保存
filePath=saveFile(item);
}
}
//返回图片的路径
response.getWriter().write(filePath);
}
}
private List<FileItem> getRequestFileItems(HttpServletRequest request) {
// TODO Auto-generated method stub
return null;
}
}