一、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;
}
}