ajaxFileUplad 异步图片上传（不支持跨域）

最新推荐文章于 2021-08-05 22:27:18 发布

雏菊007

最新推荐文章于 2021-08-05 22:27:18 发布

阅读量1.6k

点赞数

分类专栏： ajaxFileUpload 图片异步上传文章标签： JAVA html

本文链接：https://blog.csdn.net/changnet/article/details/43304949

版权

图片异步上传同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

ajaxFileUpload

1 篇文章 0 订阅

订阅专栏

异步上图片

1、html 页面

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
	content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" />
<title>异步上传图片</title>
<link href="css/cssReset.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<script type="text/javascript" src="Pub/js/jquery-1.11.1.mini.js"></script>
<script type="text/javascript" src="Pub/js/jquery.cookie.js"></script>
<script type="text/javascript" src="Pub/js/utils.common.js"></script>
<script type="text/javascript" src="Pub/js/import.js"></script>
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript" src="js/ajaxfileupload.js"></script>

<script type="text/javascript">
	function upload() {
		var fileName = $("#file-1").val();
		if (fileName == '') {
			alert("请先选择文件");
			return false;
		}
		$.ajaxFileUpload({
			headers : {
				'Content-Type' : 'multipart/form-data'
			},
			url : 'http://localhost:8080/YiDbFileServlet/upload',// servlet请求路径
			secureuri : false,
			fileElementId : "file-1",// 上传控件的id  
			dataType : 'json',
			//上传的参数
			/* data : {
				tokenKey : "1862be57edcc558dbda22696507f4b37.101.500",
				m : "doctorLicense"
			}, */
			success : function(data, status, e) {
				alert(data.data + "..........");
			},
			error : function(data, status, e) {
				alert('上传出错');
			}
		})
	}
</script>


<body>
	<form id="form-1" action="form1" method="post">
		<input type="file" id="file-1" οnchange="upload()" name="file-1"
			class="w250">
	</form>
</body>
</html>

2、web.xml配置

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
  <display-name>YiDbFileServlet</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file> 
  </welcome-file-list>
  <servlet>
    <servlet-name>upload</servlet-name>
    <servlet-class>web.servlets.UploadProcessorServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>upload</servlet-name>
    <url-pattern>/upload</url-pattern>
  </servlet-mapping>
  
  
   <servlet>
    <servlet-name>uploadLicenseNum</servlet-name>
    <servlet-class>web.servlets.UploadLicenseNumServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>uploadLicenseNum</servlet-name>
    <url-pattern>/uploadLicenseNum</url-pattern>
  </servlet-mapping>
  
  
  
  
  
</web-app>

3、servlet 处理上传图片的方法

package web.servlets;

import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Iterator;
import java.util.List;
import java.util.UUID;

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 net.sf.json.JSONObject;

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 org.cj.security.data.SecurityDataManage;
import org.cj.security.data.json.JsonData;
import org.cj.security.data.json.ResultObject;
import org.cj.security.passport.objects.Token;

import datas.DataHandle;
import defines.Defines;

import baselib.config.LoadProperties;
import baselib.tools.reserve.StringUtils;

/**
 * 
 * 文件上传 具体步骤： 1）获得磁盘文件条目工厂 DiskFileItemFactory 要导包 2） 利用 request 获取 真实路径
 * ，供临时文件存储，和 最终文件存储 ，这两个存储位置可不同，也可相同 3）对 DiskFileItemFactory 对象设置一些 属性
 * 4）高水平的API文件上传处理 ServletFileUpload upload = new ServletFileUpload(factory);
 * 目的是调用 parseRequest（request）方法 获得 FileItem 集合list ，
 * 
 * 5）在 FileItem 对象中 获取信息， 遍历， 判断 表单提交过来的信息 是否是 普通文本信息 另做处理 6） 第一种. 用第三方 提供的
 * item.write( new File(path,filename) ); 直接写到磁盘上 第二种. 手动处理
 * 
 */
public class UploadProcessorServlet extends HttpServlet {
	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 = LoadProperties.readValue("/../data.properties", "fileSavePath") + LoadProperties.readValue(Defines.dataConfigFile,"channelClass") + "/";
		// 存放临时文件的目录,存放xxx.tmp文件的目录
		TEMP_FOLDER = servletCtx.getRealPath("/uploadTempLince");
	}

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
	 *      response)
	 */
	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");
		// 获得磁盘文件条目工厂
		DiskFileItemFactory factory = new DiskFileItemFactory();

		// 如果没以下两行设置的话，上传大的 文件 会占用 很多内存，
		// 设置暂时存放的 存储室 , 这个存储室，可以和 最终存储文件 的目录不同
		/**
		 * 原理 它是先存到 暂时存储室，然后在真正写到 对应目录的硬盘上， 按理来说 当上传一个文件时，其实是上传了两份，第一个是以 .tem
		 * 格式的 然后再将其真正写到 对应目录的硬盘上
		 */
		factory.setRepository(new File(TEMP_FOLDER));
		// 设置 缓存的大小，当上传文件的容量超过该缓存时，直接放到 暂时存储室
		factory.setSizeThreshold(1024 * 1024);
		JsonData json = null;
		// 高水平的API文件上传处理
		ServletFileUpload upload = new ServletFileUpload(factory);
		JsonData jd = new JsonData();
		ResultObject ro = new ResultObject();
		PrintWriter writer = response.getWriter();
		try {
			// 提交上来的信息都在这个list里面
			// 这意味着可以上传多个文件
			// 请自行组织代码
			List<FileItem> list = upload.parseRequest(request);
			// 验证token 
						String tokenkey = this.getParameterValue(list, "tokenKey");
						String m = this.getParameterValue(list, "m");
						if(StringUtils.isEmpty(tokenkey) || StringUtils.isEmpty(m)){
							json = makeErrRes("tokenKey为空或m为空");
							writer.write(JSONObject.fromObject(json).toString());
							return;
						}
//						Token token = null;
						Token token = SecurityDataManage.GetPassportDataInstance().invoke_passport.getTokeyByAccessCode(tokenkey);
						if(token == null || token.getUserId() < 1){
							json = makeErrRes("无效的token");
							writer.write(JSONObject.fromObject(json).toString());
							return;
						}
						
			// 获取上传的文件
			FileItem item = getUploadFileItem(list);
			// 获取文件名
			String filename = getUploadFileName(item);

			System.out.println("存放目录:" + PATH_FOLDER);
			System.out.println("文件名:" + filename);

			// 真正写到磁盘上
			String fname =new SimpleDateFormat("yyyyMMddHHmmss").format(new Date())+filename.substring(filename.lastIndexOf("."), filename.length());// UUID.randomUUID().toString() + filename.substring(filename.lastIndexOf("."), filename.length());
			File folder = new File(PATH_FOLDER+"LiceNum/");
			if(!folder.exists())
				folder.mkdirs();
			System.out.println("创建文件夹。。。。。。。");
			item.write(new File(folder , fname)); // 第三方提供的
			String url = LoadProperties.readValue("/../data.properties", "fileUrlPreLince")+fname;
			json = handleUpload(url,m,token);
			writer.write(JSONObject.fromObject(json).toString());
			
		} catch (Exception e) {
			e.printStackTrace();
			json = makeErrRes("上传错误");
			writer.write(JSONObject.fromObject(json).toString());
		} finally{
			writer.close();
			System.out.println("结束。。。。。。。。");
		}

	}
	public JsonData makeErrRes(String string) {
		JsonData json = new JsonData();
		ResultObject result =  new ResultObject();
		result.setResult(false);
		result.setReason(string);
		json.setResult(result);
		return json;
		
	}

	private JsonData handleUpload(String url,String m,Token token) {
		JsonData json = null;
		if("doctorLicense".equals(m)){
			return DataHandle.doctorLicense(url,token);
		}else{
			return makeErrRes("未知的m");
		}
	}

	private String upload(List<FileItem> list,String m)throws Exception {

		FileItem item = getUploadFileItem(list);
		// 获取文件名
		String filename = getUploadFileName(item);
					
		System.out.println("存放目录:" + PATH_FOLDER);
		System.out.println("文件名:" + filename);

		// 真正写到磁盘上
		String fname =new SimpleDateFormat("yyyyMMddHHmmss").format(new Date())+filename.substring(filename.lastIndexOf("."), filename.length());// UUID.randomUUID().toString() + filename.substring(filename.lastIndexOf("."), filename.length());
//		String zi_folder = "images/" + new SimpleDateFormat("yyyy-MM-dd").format(new Date()) + "/";
		File folder = new File(PATH_FOLDER);
		if(!folder.exists())
			folder.mkdirs();
		System.out.println("创建文件夹。。。。。。。");
//		item.write(new File(folder , fname)); // 第三方提供的
		String fileurl = LoadProperties.readValue(Defines.dataConfigFile,"fileUrlPreLince")+fname;
		System.out.println("返回的url:" + fileurl);
		return fileurl;
	}

	public String getParameterValue(List<FileItem> fileItemList,
			String paramName) {
		try {
			if (fileItemList != null) {
				for (Iterator itr = fileItemList.iterator(); itr.hasNext();) {
					FileItem fileItem = (FileItem) itr.next();
					if (fileItem.getFieldName().equalsIgnoreCase(paramName)) {
						return new String(fileItem.getString().getBytes(
								"ISO8859-1"));// 中文转码
					}
				}
			}
		} catch (Exception e) {
			return null;
		}
		return null;
	}

//	private FileItem getUploadFileItem(List<FileItem> 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;
	}

	private FileItem getUploadFileItem(List<FileItem> list) {

		for (FileItem fileItem : list) {
			if (!fileItem.isFormField()) {
				return fileItem;
			}
		}
		return null;
	}
	
	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
	 *      response)
	 */
	protected void doPost(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		this.doGet(request, response);
	}

}

雏菊007

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ajaxFileUplad 异步图片上传（不支持跨域）

异步上图片1、html 页面<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" />异步上传图片 function upload() { var fileName = $("#file-1").val()
复制链接

扫一扫