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

       今天给大家带来的是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:


第六个是jar包:


演示的效果:


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


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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值