Ajax+Servlet文件上传(带进度条)

最新项目有个需求，需要文件上传并带上上传进度条。

大致步骤为：

（1）用户在标签中选择文件，并点击提交按钮。

<input id="selectFile" type="file" name="file" value="选择文件">

（2）点击按钮触发js函数，函数中获取用户提交的文件，并包装到新建的FormData 对象中。

//获取文件名称
function upload(){
    //获取文件名称
    var fileName = getFileName($("#selectFile").val());
    //新建一个FormData
    var formData = new FormData();
    //用户上传的文件,append进去
    formData.append("file", $("#selectFile")[0].files[0]);
    formData.append("fileName",fileName);
    //……其他代码
}

//获取文件名称
function getFileName(o){
    var pos=o.lastIndexOf("\\");
    return o.substring(pos+1);  
}

（3）使用ajax函数，发送formData对象到后端Servlet。

到这一步，都是正常的、普通的文件提交。

（4）加入进度条功能：通过 给XMLHttpRequest对象的upload属性绑定onprogress方法监听上传过程。

再通过 已上传文件大小/总文件大小 获取的值即可获得上传百分比。

再渲染对应的组件即可（这里使用layui的进度条组件）。

$.ajax({
	url : "../uploadFile.action",
	type : "POST",
	dataType : "text",
	async : true,
	cache : false,
	data : formData,
	processData : false, //  告诉jquery不要处理发送的数据
	contentType : false, // 告诉jquery不要设置content-Type请求头
	xhr : function() {
		//给XMLHttpRequest对象的upload属性绑定onprogress方法监听上传过程
		//var xnewhr = new XMLHttpRequest();  xnewhr.upload.onprogress = function(e) {}
		//因为jQuery默认使用的XMLHttpRequest对象是内部生成的无法直接给jq的xhr绑定onprogress方法
		//所以只要给jQuery重新生成一个绑定了onprogress的XMLHttpRequest对象即可实现
		let newxhr = new XMLHttpRequest();
		// 添加文件上传的监听
		// onprogress:进度监听事件，只要上传文件的进度发生了变化，就会自动的触发这个事件
			newxhr.upload.onprogress = function(e) {
				let percent = parseInt((e.loaded / e.total) * 100) + '%';
				element.progress('demo', percent)
			}
			return newxhr;
		},
		success : function(data) {
			//上传成功
		},
		error : function(data) {
			alert("上传出现错误，请联系管理员");
		}

进度条 HTML 代码

<div class="layui-progress layui-progress-big" id="percent1" lay-filter="demo" lay-showPercent="true" style="width: 200px">
    <div id="percent" class="layui-progress-bar" lay-percent="0%"></div>
</div>

（5）后端Servlet代码，主要是用apache.commons.fileupload 组件实现，比较简单。

protected void doPost(final HttpServletRequest req, final HttpServletResponse resp)throws ServletException, IOException {
  		DiskFileItemFactory factory = new DiskFileItemFactory();
  		ServletFileUpload upload = new ServletFileUpload(factory);
  		factory.setSizeThreshold(DiskFileItemFactory.DEFAULT_SIZE_THRESHOLD);
        //设置临时文件的存储位置（文件大小大于吞吐量的话就必须设置这个值，比如文件大小：1GB ，一次吞吐量：1MB）
        factory.setRepository(new File(req.getServletContext().getRealPath("/WEB-INF/temp/")));
  		upload.setFileSizeMax(5368709120l);   //设置单个文件上传的大小5GB
  		upload.setSizeMax(-1);
  		upload.setHeaderEncoding("UTF-8");
  		Map<String,String> ret = new HashMap<>();
  		try {
  			List<FileItem> fileItemList = upload.parseRequest(req);
  			Map<String,String> map = new HashMap<>();
  			for (FileItem fileItem : fileItemList) {
  				if (fileItem.isFormField()) {
  					map.put(fileItem.getFieldName(), fileItem.getString());
  				}
  			}
  			for (FileItem fileItem : fileItemList) {
  				if (!fileItem.isFormField()) {
					String uploadPath = req.getServletContext().getRealPath("/WEB-INF/attachments/");
					//保存文件到本地
					fileItem.write(new File(uploadPath+map.get("fileName")));
					//保存文件到Hive
					ret = httpPost(map.get("fileName"),uploadPath);
					if(ret.get("code").equals("1")) {
						//获取文件在hive中的md5值，并保存到工作项字段中
						ret = getMd5andSave(map.get("fileName"),map.get("projectId"),map.get("itemId"));
						ret.put("msg", "文件上传成功");
					}
  				}
  			}
  		} catch (Exception e1) {
  			ret.put("msg", "文件上传失败");
  			ret.put("code", "0");
  			log.info("uploadFile doPost报错",e1);
  		}
  		responseOut(resp,gson.toJson(ret));
	}