ajax异步上传文件(无需表单)

柔光的暖阳◎ 2022-06-10 12:50 408阅读 0赞

今天给大家带来的是ajax上传文件，不需要表单，不需要把表单设置二级制数据传输格式，简单粗暴，看了之后的都会了。废话不多说，下面看代码把，最下面给大家哦提供一个示列下载。我这里使用的是jsp+servlet实现的，你们需要融合到别的框架改下代码就行。

第一个是后台的代码:

package control;
    
    import java.io.File;
    import java.io.IOException;
    import java.io.PrintWriter;
    import java.util.Date;
    import java.util.List;
    import javax.servlet.ServletConfig;
    import javax.servlet.ServletContext;
    import javax.servlet.ServletException;
    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.FileUploadException;
    import org.apache.commons.fileupload.disk.DiskFileItemFactory;
    import org.apache.commons.fileupload.servlet.ServletFileUpload;
    import entity.MyFileInfo;
    
    /**
     * 
     * 文件上传 具体步骤： 
     * 1）获得磁盘文件条目工厂 DiskFileItemFactory 要导包 
     * 2） 利用 request 获取真实路径，供临时文件存储，和 最终文件存储 ，这两个存储位置可不同，也可相同
     * 3）对 DiskFileItemFactory 对象设置一些 属性
     * 4）高水平的API文件上传处理 ServletFileUpload upload = newServletFileUpload(factory);目的是调用 parseRequest（request）方法 获得 FileItem 集合list ，
     * 5）在 FileItem 对象中 获取信息， 遍历， 判断 表单提交过来的信息 是否是 普通文本信息 另做处理 
     * 6） 第一种. 用第三方提供的item.write( new File(path,filename) ); 直接写到磁盘上 第二种. 手动处理
     * 
     */
    public class UploadFileServlet extends HttpServlet {
    	// 文件信息
    	private static MyFileInfo myFileInfo = null;
    	private static final long serialVersionUID = 1L;
    	// 保存文件的目录
    	private static String PATH_FOLDER = "/";
    	// 存放临时文件的目录
    	private static String TEMP_FOLDER = "/";
    
    	@Override
    	public void init(ServletConfig config) throws ServletException {
    		ServletContext servletCtx = config.getServletContext();
    		// 初始化路径
    		// 保存文件的目录
    		PATH_FOLDER = servletCtx.getRealPath("/upload");
    		// 存放临时文件的目录,存放xxx.tmp文件的目录
    		TEMP_FOLDER = servletCtx.getRealPath("/uploadTemp");
    	}
    
    	protected void doGet(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    		request.setCharacterEncoding("GBK"); // 设置编码
    		response.setCharacterEncoding("GBK");
    		response.setContentType("text/html;charset=GBK");
    		// 获得磁盘文件条目工厂
    		DiskFileItemFactory factory = new DiskFileItemFactory();
    		// 如果没以下两行设置的话，上传大的 文件 会占用 很多内存，
    		// 设置暂时存放的 存储室 , 这个存储室，可以和 最终存储文件 的目录不同
    		/**
    		 * 原理 它是先存到 暂时存储室，然后在真正写到 对应目录的硬盘上， 按理来说 当上传一个文件时，其实是上传了两份，第一个是以 .tem
    		 * 格式的 然后再将其真正写到 对应目录的硬盘上
    		 */
    		factory.setRepository(new File(TEMP_FOLDER));
    		// 设置 缓存的大小，当上传文件的容量超过该缓存时，直接放到 暂时存储室
    		factory.setSizeThreshold(1024 * 1024);
    		// 高水平的API文件上传处理
    		ServletFileUpload upload = new ServletFileUpload(factory);
    		try {
    			// 提交上来的信息都在这个list里面
    			// 这意味着可以上传多个文件
    			// 请自行组织代码
    			List
       
         list = upload.parseRequest(request);
    			// 获取上传的文件
    			FileItem item = getUploadFileItem(list);
    			// 获取文件名
    			String filename = getUploadFileName(item);
    			// 保存后的文件名
    			String saveName = new Date().getTime() + filename.substring(filename.lastIndexOf("."));
    			// 保存后图片的浏览器访问路径
    			String fileUrl = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
    					+ request.getContextPath() + "/upload/" + saveName;
    			System.out.println("存放目录:" + PATH_FOLDER);
    			System.out.println("文件名:" + filename);
    			System.out.println("浏览器访问路径:" + fileUrl);
    			// 真正写到磁盘上
    			item.write(new File(PATH_FOLDER, saveName)); // 第三方提供的
    			String fileType = filename.substring(filename.lastIndexOf(".") + 1);
    			PrintWriter writer = response.getWriter();
    			// 把文件响应给前台显示
    			writer.print("{");
    			writer.print("fileUrl:\"" + fileUrl + "\"");
    			writer.print("}");
    			writer.close();
    			myFileInfo = new MyFileInfo();
    			myFileInfo.setCreateName("小刘");
    			myFileInfo.setCreateDate(new Date());
    			myFileInfo.setFileName(filename);
    			myFileInfo.setFilePath(PATH_FOLDER + "/" + filename);
    			myFileInfo.setFileSize(item.getSize());
    			myFileInfo.setFileType(fileType);
    			myFileInfo.setFileUrl(fileUrl);
    		} catch (FileUploadException e) {
    			e.printStackTrace();
    		} catch (Exception e) {
    			e.printStackTrace();
    		}
    
    	}
    
    	private FileItem getUploadFileItem(List
        
          list) {
    		for (FileItem fileItem : list) {
    			if (!fileItem.isFormField()) {
    				return fileItem;
    			}
    		}
    		return null;
    	}
    
    	private String getUploadFileName(FileItem item) {
    		// 获取路径名
    		String value = item.getName();
    		// 索引到最后一个反斜杠
    		int start = value.lastIndexOf("/");
    		// 截取 上传文件的 字符串名字，加1是 去掉反斜杠，
    		String filename = value.substring(start + 1);
    		return filename;
    	}
    
    	protected void doPost(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    		this.doGet(request, response);
    	}
    
    	public static MyFileInfo getMyFileInfo() {
    		return myFileInfo;
    	}
    
    }

第二个是文件实体类代码:

package entity;
    
    import java.util.Date;
    
    public class MyFileInfo {
    
    	// 文件路径
    	private String filePath;
    	// 文件名称
    	private String fileName;
    	// 文件大小
    	private Long fileSize;
    	// 文件类型
    	private String fileType;
    	// 创建时间
    	private Date createDate;
    	// 创建人
    	private String createName;
    	// 图片访问路径
    	private String fileUrl;
    
    	public String getFileUrl() {
    		return fileUrl;
    	}
    
    	public void setFileUrl(String fileUrl) {
    		this.fileUrl = fileUrl;
    	}
    
    	public String getFilePath() {
    		return filePath;
    	}
    
    	public void setFilePath(String filePath) {
    		this.filePath = filePath;
    	}
    
    	public String getFileName() {
    		return fileName;
    	}
    
    	public void setFileName(String fileName) {
    		this.fileName = fileName;
    	}
    
    	public Long getFileSize() {
    		return fileSize;
    	}
    
    	public void setFileSize(Long fileSize) {
    		this.fileSize = fileSize;
    	}
    
    	public String getFileType() {
    		return fileType;
    	}
    
    	public void setFileType(String fileType) {
    		this.fileType = fileType;
    	}
    
    	public Date getCreateDate() {
    		return createDate;
    	}
    
    	public void setCreateDate(Date createDate) {
    		this.createDate = createDate;
    	}
    
    	public String getCreateName() {
    		return createName;
    	}
    
    	public void setCreateName(String createName) {
    		this.createName = createName;
    	}
    
    }

第三个是jsp界面：

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8" import="entity.MyFileInfo"%>

第四个是web.xml的配置：

uploadFileServlet
         
    		
         
          control.UploadFileServlet
         
    	
        
    	
        
    		
         
          uploadFileServlet
         
    		
         
          /uploadFile
         
    	
        
    
    	
        
    		
         
          uploadFile.jsp

第五个是js：

![Center][]

第六个是jar包：

![Center 1][]

演示的效果:

![Center 2][]

好了，整个项目基本需要的内容都在这，清楚明了，详细。后期需要附加到自己项目都是可以的。

最后：没有整合成功的，我提供了下载地址，可以去这里下载：http://download.csdn.net/download/qq\_27026603/9941363

[Center]: /images/20220610/51f7207eb4134bc394bdf4d1231f7297.png
[Center 1]: /images/20220610/952838aba66d4d33b392d60bddf214d7.png
[Center 2]: /images/20220610/ef9649e87e574c298d0d0adf830a7db1.png