摄人心魄的美女演员教你在javaScript中ajax如何上传文件(javaWeb开发之文件上传)

下面演示一下，怎么upload一部女神小电影到服务器上(通过ajax上传文件)

呈现上传文件时的进度条效果，如下图： 

这部女神小电影是我的私藏，不可能共享给大家的，有本事，你们自己去网上找啊，"你们个个都是人才，说话又好听"，我超喜欢你们的！嗯哼。。。你们懂得哈！

言归正传

从http协议的角度看,上传文件,需要把文件的内容放在协议的主体信息里发送.
ajax上传文件,则意味着,js的XMLHttpRequest对象,可以获取文件的信息.
出于安全角度,JS不能获取磁盘上的文件.
因此, ajax上传文件,做不到.
网上的ajax上传,往往是用swf,或iframe伪装,不是真的ajax上传.
但是,HTML5后,浏览器新增了FormData对象,且XMLHttpRequest对象也新增了一些功能.
可以让我们完成ajax上传,且有进度条效果.

以上是假的ajax上传文件，以上只不过是用了一个

---

真正的ajax上传文件(借助FormData对象)

HTML5后,浏览器新增了FormData对象,且XMLHttpRequest对象也新增了一些功能，可以让我们完成ajax上传,且有进度条效果.

文件1：

文件2：

用户名：

test.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>











文件上传后台
<%
	String upFile = request.getParameter("upFile");
	String userName = request.getParameter("userName");
	System.out.println("**********upFile=" + upFile);
	System.out.println("**********userName=" + userName);
	out.println("" + upFile + "
");
 	out.println("" + userName + "
");
%>

 以下是java后台处理上传文件的代码(upload类和upload2类)，这2个类，是我在网上找的，代码我没整理，大家凑合着看吧！

upload类和upload2类都可以处理上传的文件，随便选其中一个类就行！

我这篇文章的重点是前端ajax如何上传文件，所以，java后台处理上传的文件，不是我这篇文章的重点！

package com.jiongmeng.ajax;

import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Iterator;
import java.util.List;

import javax.servlet.ServletConfig;
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.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;


/**
 * 测试ajax上传文件
 * @param 
 */
@WebServlet("/ajaxUpload2")
public class upload2 extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest req, HttpServletResponse res)
			throws ServletException, IOException {
		req.setCharacterEncoding("UTF-8");
		res.setContentType("text/plain;charset=utf-8");
        PrintWriter pw = res.getWriter();  
        try{  
            DiskFileItemFactory diskFactory = new DiskFileItemFactory();  
            // threshold 极限、临界值，即硬盘缓存 1M  
            diskFactory.setSizeThreshold(4 * 1024);  
            // repository 贮藏室，即临时文件目录  
            diskFactory.setRepository(new File("temp"));  
          
            ServletFileUpload upload = new ServletFileUpload(diskFactory);  
            // 设置允许上传的最大文件大小 4M  
//            upload.setSizeMax(4 * 1024 * 1024);  
            // 解析HTTP请求消息头  
            List fileItems = upload.parseRequest(req);  
            Iterator iter = fileItems.iterator();  
            while(iter.hasNext())  
            {  
                FileItem item = (FileItem)iter.next();  
                if(item.isFormField())  
                {  
                    System.out.println("处理表单内容 ......");  
                    processFormField(item, pw);  
                }else{  
                    System.out.println("处理上传的文件 ......");  
                    processUploadFile(item, pw);  
                }  
            }// end while()  
 
            pw.close();  
        }catch(Exception e){  
            System.out.println("使用 fileupload 包时发生异常 ......");  
            e.printStackTrace();  
        }
	}

	

	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doGet(request, response);
	}

	@Override
	public void init(ServletConfig config) throws ServletException {

	}
	
	private void processFormField(FileItem item, PrintWriter pw)  
	        throws Exception  
	    {  
	        String name = item.getFieldName();  
	        String value = item.getString();          
	        pw.println(name + " : " + value + "\r\n");  
	    }  
	
	private void processUploadFile(FileItem item, PrintWriter pw)  
	        throws Exception  
	    {  
	        // 此时的文件名包含了完整的路径，得注意加工一下  
	        String filename = item.getName();         
	        System.out.println("完整的文件名：" + filename);  
	        int index = filename.lastIndexOf("\\");  
	        filename = filename.substring(index + 1, filename.length());  
	 
	        long fileSize = item.getSize();  
	 
	        if("".equals(filename) && fileSize == 0)  
	        {             
	            System.out.println("文件名为空 ...");  
	            return;  
	        }  
	 
	        File uploadFile = new File("G:/workspace2016-04-03/ajax/uploadFile" + "/" + filename);  
	        item.write(uploadFile);  
	        pw.println(filename + " 文件保存完毕 ...");  
	        pw.println("文件大小为 ：" + fileSize + "\r\n");  
	    }  
	
}

package com.jiongmeng.ajax;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.io.PrintWriter;
import java.util.List;
import java.util.UUID;

import javax.servlet.ServletConfig;
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;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileItemFactory;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.ProgressListener;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

/**
 * 测试ajax上传文件
 * 
 * @param 
 */
@WebServlet("/ajaxUpload")
// @MultipartConfig(location = "G://workspace2016-04-03//ajax")
public class upload extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// 设置请求和响应的编码格式
		 request.setCharacterEncoding("UTF-8");
		// response.setCharacterEncoding("UTF-8");
		 response.setContentType("text/html;charset=UTF-8");

		System.out.println("===========" + request.getParameter("userName"));

		// // request.getPart()获取指定的文件上传域。还有getParts()来获取所有的文件上传域
		// Part part = request.getPart("upFile");
		// // part.getContentType()获取part上传文件的文件类型
		// System.out.println("上传文件的类型为：" + part.getContentType());
		// System.out.println("上传文件的大小为：" + part.getSize());
		
		PrintWriter pw = response.getWriter();

		// 核心Api
		FileItemFactory factory = new DiskFileItemFactory();
		ServletFileUpload fileUpload = new ServletFileUpload(factory);

		// 判断是否是muitipart/form-data类型
		if (!ServletFileUpload.isMultipartContent(request)) {
			response.getWriter().println("表单的enctype属性不是multipart/form-data类型");
		}

		// // 设置单个文件上传大小 2M
		// fileUpload.setFileSizeMax(2 * 1024 * 1024);
		// // 设置总上传文件大小(有时候一次性上传多个文件，需要有一个上限,此处为10M)
		// fileUpload.setSizeMax(10 * 1024 * 1024);
		// 设置上传监听器[参数为自定义的监听器]
		fileUpload.setProgressListener(new ListenerUploadProgress());
		// 解析请求
		try {
			List parseRequest = fileUpload.parseRequest(request);
			// 获取数据
			for (FileItem fileItem : parseRequest) {
				// 判断数据类型是不是普通的form表单字段
				if (!fileItem.isFormField()) {
					// 上传文件
					String fileName = fileItem.getName();
					InputStream fileStream = fileItem.getInputStream();
					// 定义保存的父路径
					String parentDir = request.getServletContext().getRealPath("/WEB-INF/upload");
					System.out.println(parentDir);
					// 使用UUID+文件名的方式，避免文件重名
					String realFileName = UUID.randomUUID().toString() + "-" + fileName;
					// 创建要保存的文件
					File file = new File(parentDir, realFileName);
					// 判断文件夹是否存在
					if (!file.getParentFile().exists()) {
						// 创建文件夹[多级文件夹]file.madir是创建单一文件夹
						file.getParentFile().mkdirs();
					}

					// 创建输出流
					OutputStream out = new FileOutputStream(file);
					// 创建字节缓存
					byte[] buffer = new byte[1024];
					int len = -1;
					// 一次读取1kb(1024byte),返回-1表明读取完毕
					while ((len = fileStream.read(buffer)) != -1) {
						// 一次写入1kb(1024byte)
						out.write(buffer, 0, len);
					}

					// 冲刷流资源
					out.flush();
					// 关闭流
					out.close();
					fileStream.close();
					pw.println(fileName + "上传文件成功了");
				} else {
					// 普通字段

					// 字段名
					String fieldName = fileItem.getFieldName();
					// 字段值
					String fieldValue = fileItem.getString();
					System.out.println(fieldName + ":" + fieldValue);
				}
			}
			
		} catch (FileUploadException e) {
			e.printStackTrace();
		}
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doGet(request, response);
	}

	@Override
	public void init(ServletConfig config) throws ServletException {

	}

}

class ListenerUploadProgress implements ProgressListener {

	/**
	 * @param bytesRead
	 *            已经读取的字节数
	 * @param contentLength
	 *            文件总长度
	 * @param items
	 *            当前上传的是哪个文件
	 */
	@Override
	public void update(long bytesRead, long contentLength, int items) {
		System.out.println("#######" + bytesRead);
		System.out.println("￥￥￥￥￥￥" + contentLength);
		System.out.println("$$$$$$$" + items);
	}

	//前端可以根据该信息写一个上传进度条
}

我项目中用的tomcat是7.0版本，我的jdk是1.7版本

java上传文件，需要用到第三方jar包(commons-fileupload.jar和commons-io.jar) 

注意：这2个jar包的版本要结合你的tomcat版本和jdk版本，要不然，程序很容易报错！

所以，这2个jar包的版本不要下载错了，如果这2个jar包的版本与你的tomcat版本和jdk版本不匹配的话，程序很容易报错，或者会造成无法获取上传文件的信息！

我项目中用的tomcat是7.0版本，我的jdk是1.7版本，我下载的是commons-fileupload-1.2.2.jar和commons-io-2.6.jar，程序不会报错，可以正常获取上传文件的信息！

我之前下载的是commons-io-2.7.jar，导致一直获取不到上传文件的信息！就是下面这句代码，parseRequest的长度一直为0，我当时极其郁闷！

List parseRequest = fileUpload.parseRequest(request);

后来，我把commons-io-2.7.jar替换成了commons-io-2.6.jar，后台就能获取到上传文件的信息了！

下载commons-fileupload.jar和commons-io.jar这2个jar包的时候，到底下载哪一个版本呢？最好的办法就是你自己一个一个去试！