ajax上传文件（ajax+Struts1 & ajax+servlet+上传进度条）

最新推荐文章于 2024-04-29 14:57:37 发布

一点也不想取名

最新推荐文章于 2024-04-29 14:57:37 发布

阅读量395

点赞数

分类专栏： java学习 js

本文链接：https://blog.csdn.net/zhouxzcsdn/article/details/106672388

版权

java学习同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

4 篇文章 0 订阅

订阅专栏

一、Struts1 ajax上传文件
input框

<input type="button" value="上传" onclick="uploadFile()" > 
<input  id="fileId" type="file" name="billfile" style="width: 200px;height: 20px"></input>

ajax请求(注意需要使用支持FormData对象的jquery版本)

FormData 对象的在jquery中使用
1.创建：var formData = new formData();

2.添加键值对：formData.append('key','value');
  formData.append("formFile",$('#fileId')[0].files[0]);

3.发送数据：
	$.ajax({
		url:"<%=request.getContextPath()%>/impDataAction.do?type=uploadFile",
		type: "POST",
		data: formData,
		processData : false, // 告诉jQuery不要去处理发送的数据(必须设置)
		contentType : false, // 告诉jQuery不要去设置Content-Type请求头（必须设置）
		success: function(data) {
		    alert("ok");
		},
		error: function(request) {
			alert("Connection error");
		}
	});
}

Struts配置：

action配置，重点在于impDataForm与ImpDataAction
<action  path="/impDataAction" type="com.mycim.webapp.actions.maintain.ImpDataAction" name="impDataForm" scope="request"
	 input="/maintain/impdata.jsp">
</action>

java代码：

if(StringUtils.equals(getParameter("type", request), "uploadFile")){
        	try {
        		FormFile formFile = impDataForm.getFormFile();
        		InputStream in = formFile.getInputStream();
        		FileOutputStream out = new FileOutputStream("D:/Users/uniz/Desktop/test/"+formFile.getFileName());
        		byte[] buf = new byte[1024];
        		int len;
        		while ((len = in.read(buf)) != -1) {
        		   out.write(buf, 0, len);
        		}
        		in.close();
        		out.close();
        	} catch (Exception e) {
        	}
        	return WebUtil.NULLActionForward;
        }

二、Ajax + Servlet + 上传进度条
需要jar包

	<dependency>
	    <groupId>commons-fileupload</groupId>
	    <artifactId>commons-fileupload</artifactId>
	    <version>1.3.3</version>
	</dependency>
	<dependency>
	    <groupId>commons-io</groupId>
	    <artifactId>commons-io</artifactId>
	    <version>2.6</version>
	</dependency>

jsp&ajax&上传进度条

<%@ page contentType="text/html;charset=UTF-8"%>
<%@ page language="java"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<%@ include file="/app/common/head.jsp"%>
<style type="text/css">
.progress {
   width: 600px;
    height: 10px;
    border: 1px solid #ccc;
    border-radius: 10px;
    margin: 10px 0px;
    overflow: hidden;
}
/* 初始状态设置进度条宽度为0px */
.progress > div {
    width: 0px;     
    height: 100%;
    background-color: yellowgreen;
    transition: all .3s ease;
}
</style>
</head>

<body>
<div class="progress">
    <div></div>
</div>
	<form id="myForm" action="" method="post" enctype="multipart/form-data">
	 选择一个文件:<br/>
    <input type="file" id='fileName1'  name="uploadFile" /><!-- 文件必须要有ID --><br/>
    <input type="file" id='fileName2'  name="uploadFile2" /><br/>
    <input type="text" value="文件中文说明" name="cnfield" /><br/>
    <input type="button" onclick='doupload()' value="ajax upload" /><br/>
    <input type="submit" value="提交表单upload" />
	</form>
</body>
<script type="text/javascript">
$(function(){
	$("form").attr("action", getProPath()+"/UploadServlet");
});
function checkAndGetFile(file){//check文件大小
	if(file == undefined){
		alert('文件不存在!');
		return false;
	}
	if(file.size > 1024*1024*500){
		alert('文件大于500M，不允许上传!');
		return false;
	}
	return true;
}
function buildFormData(){
	var formData = new FormData();
	formData.append('fieldName',$('#fileName1')[0].files[0]);
    formData.append('fieldName',document.getElementsByName('uploadFile2')[0].files[0]);
    formData.append('fileDesc',$('input[name="cnfield"]').val());
    return formData;
}
function doupload(){
	if(!checkAndGetFile($('#fileName1')[0].files[0])){
		return;
	}
	var formData = buildFormData();
	$.ajax({
        url:$("form").attr("action"), 
        dataType:'json',
        type:'POST',
        async: true,//显示上传进度条需要异步
        cache: false,
        data: formData,
        processData : false, // 对表单data数据是否进行序列化,不做处理
        contentType : false,// 不要设置Content-Type请求头
        timeout:120000,
        success: function(data){
        	console.log(data);
        	if(data.success){
        		alert(data.msg.uploadMsg);
        	}
        },
        error:function(xhr, textStatus, errorThrown){
        	console.log(xhr);
			alert("ajax error textStatus = " + textStatus+", errorThrown = " + errorThrown);
        },
        complete:function(){
        	initProgressBar();
        },
        xhr: function () {
            var myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) {//使用myXhr.upload监听上传过程，注册progress事件
                myXhr.upload.addEventListener('progress', function(event){
                	refreshProgressBar(event);
                }, false);
            }
            return myXhr; //xhr对象返回给jQuery使用
        }
    });
}
function refreshProgressBar(event){
	var progressRate = (event.loaded / event.total) * 100 + '%';
	$('.progress > div').css('width', progressRate);
}
function initProgressBar(){
	$('.progress > div').css('width', 0);
}
</script>
</html>

servlet

package com.study.file;

import java.io.File;
import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

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.collections.CollectionUtils;
import org.apache.commons.collections.MapUtils;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.commons.fileupload.servlet.ServletRequestContext;
import org.apache.commons.lang.StringUtils;

import com.study.json.JSONUtils;
import com.study.json.ReponseJSONBuilder;
import com.study.util.WebUtils;

/**
 * 特别注意，上传文件遇到异常时，浏览器端接收不到异常信息。
 * 原因是上传文件时浏览器请求持续时间长(文件未上传完)，发生异常后，服务器虽然立即捕获异常并响应给浏览器，
 * 但是浏览器仍然在发送上传请求，接收不到异常信息。
 * @author uniz
 */
@WebServlet("/UploadServlet")
public class UploadServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
     
    // 上传文件存储目录
    private static final String UPLOAD_DIRECTORY = "uploadDir";
 
    // 上传配置
    private static final int MEMORY_THRESHOLD   = 1024 * 1024 * 300*3;  // 300MB
    private static final int MAX_FILE_SIZE      = 1024 * 1024 * 400*3; // 400MB
    private static final int MAX_REQUEST_SIZE   = 1024 * 1024 * 500*3; // 500MB
 
    /**
     * 上传数据及保存文件
     */
    @SuppressWarnings("rawtypes")
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    	request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
    	if(isAjax(request)) {
    		try {
    			Map result = uploadHander(request);
				WebUtils.writeJson(response, ReponseJSONBuilder.buildSuccessMsg(JSONUtils.toJSONString(result)));
			} catch (Exception e) {
				e.printStackTrace();
				WebUtils.writeJson(response, ReponseJSONBuilder.buildErrorMsg(e));
			}
			return ;
    	}else {
    		Map result = uploadHander(request);
    		request.setAttribute("uploadFlag", MapUtils.getBooleanValue(result, "uploadFlag"));
    		request.setAttribute("message", MapUtils.getString(result, "uploadMsg")
    				+ " uploadFiles = " + MapUtils.getString(result, "uploadFiles") + "");
    		
    		request.getRequestDispatcher("/uploadfile/message.jsp").forward(request, response);
    	}
    }

	private void checkUploadFile(HttpServletRequest request) throws Exception {
		ServletRequestContext ctx = new ServletRequestContext(request);
        long requestSize = ctx.contentLength();
        if(requestSize > MAX_REQUEST_SIZE) {
        	throw new Exception("上传文件大小超过最大允许值！");
        }
        
 		if (!ServletFileUpload.isMultipartContent(request)) {
 			throw new Exception("只能 multipart/form-data 类型数据");
 		}
	}

	private boolean isAjax(HttpServletRequest req) {
		boolean isAjaxRequest = false;  
        if("XMLHttpRequest".equalsIgnoreCase(req.getHeader("x-requested-with"))){  
            isAjaxRequest = true;  
        }  
		return isAjaxRequest;
	}

	@SuppressWarnings({ "unchecked", "rawtypes" })
	private Map uploadHander(HttpServletRequest request) {
		List<Map> uploadFiles = new ArrayList<Map>();
		boolean uploadFlag = false;
		String uploadMsg = "";
		try {
			
			checkUploadFile(request);
			
			uploadFiles = doUpload(request);
			
			if(CollectionUtils.isNotEmpty(uploadFiles)) {
				
				uploadFlag = true;
				
				uploadMsg = "上传成功!";
			}else {
				uploadMsg = "没有上传内容!";
			}
			
		} catch (Exception e) {
			uploadMsg = e.getMessage();
		}
		
		Map result = new HashMap();
		result.put("uploadFlag", uploadFlag);
		result.put("uploadMsg", uploadMsg);
		result.put("uploadFiles", uploadFiles);
		return result;
	}

	@SuppressWarnings({ "unchecked", "rawtypes" })
	private List<Map> doUpload(HttpServletRequest request) throws Exception {// 配置上传参数
		List<Map> uploadFiles = new ArrayList<Map>();
		
		DiskFileItemFactory factory = new DiskFileItemFactory();
		// 设置内存临界值 - 超过后将产生临时文件并存储于临时目录中
		factory.setSizeThreshold(MEMORY_THRESHOLD);
		// 设置临时存储目录
		factory.setRepository(new File(System.getProperty("java.io.tmpdir")));

		ServletFileUpload upload = new ServletFileUpload(factory);
		
		// 设置最大文件上传值
		upload.setFileSizeMax(MAX_FILE_SIZE);

		// 设置最大请求值 (包含文件和表单数据)
		upload.setSizeMax(MAX_REQUEST_SIZE);

		// 中文处理,解决上传"文件名"的中文乱码
		upload.setHeaderEncoding("UTF-8");

		// 构造临时路径来存储上传的文件
		String uploadPath = "D:\\study\\eclipse201812R-workspace\\uniz\\src\\main\\webapp\\uploadfile\\" + UPLOAD_DIRECTORY;
		
		// 如果目录不存在则创建
		File uploadDir = new File(uploadPath);

		if (!uploadDir.exists()) {
			uploadDir.mkdir();
		}

		// 解析请求的内容提取文件数据
		List<FileItem> formItems = upload.parseRequest(request);
		
		if (CollectionUtils.isNotEmpty(formItems)) {
			// 迭代表单数据
			for (FileItem item : formItems) {
				if (!item.isFormField()) {
					if(StringUtils.isBlank(item.getName())) {
						continue;//throw new Exception("文件名不能为空，请选择上传文件!");
					}
					
					String fileName = new File(item.getName()).getName();
					String filePath = uploadPath + File.separator + fileName;
					
					File storeFile = new File(filePath);//文件的上传路径
					
					item.write(storeFile);// 保存文件到硬盘
					
					Map map = new HashMap();
					map.put("fieldType", "文件");
					map.put("fileName", fileName);
					map.put("filePath", filePath);
					map.put("fieldName", item.getFieldName());//ajax FormData中的key
					map.put("fileSize", item.getSize());
					uploadFiles.add(map);
				}else {
					Map map = new HashMap();
					map.put("fieldType", "普通字段");
					map.put("fieldName", item.getFieldName());//ajax FormData中的key
					map.put("fieldValue", item.getString("UTF-8"));
					map.put("fileSize", item.getSize());
					uploadFiles.add(map);
				}
			}
		}
		return uploadFiles;
	}
}

一点也不想取名

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ajax上传文件（ajax+Struts1 & ajax+servlet+上传进度条）

Struts1 ajax上传文件ajax请求 function uploadFile(){ var formData = new FormData(); formData.append("formFile",$('#fileId')[0].files[0]); $.ajax({ cache: true, type: "POST", url:"<%=request.getContextPath()%>/impDataAction.do?type=uploadFile",
复制链接

扫一扫

专栏目录