AJAX实现图片上传和预览（传统ajax与jQuery AJAX；带图片的表单提交）

一、通过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;
	}
}

AJAX实现图片上传和预览（传统ajax与jQuery AJAX；带图片的表单提交）

猜你喜欢