java struts2 多檔案上傳 加進度條
阿新 • • 發佈:2019-01-31
摘要 實現批量上傳,同時又進度顯示和上傳速度
1、struts.xml檔案配置
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" "http://struts.apache.org/dtds/struts-2.3.dtd"> <struts> <constant name="struts.multipart.maxSize" value="61440000000"></constant> <constant name="struts.i18n.reload" value="true" /> <constant name="struts.action.extension" value="html" /> <package name="imgfile" extends="struts-default" namespace="/imgfile"> <global-results> <result name="notFound">/error/404.jsp</result> </global-results> <action name="uploadfilesUpload" class="cn.test.ProgressAction" method="filesUpload"></action> <action name="uploadgetUploadStatus" class="cn.test.ProgressAction" method="getUploadStatus"></action> </package> </struts>
2、bean類,儲存上傳檔案的序號,已上傳大小等資訊
3、主要程式碼,action檔案package cn.test.bean; import java.io.Serializable; @SuppressWarnings("serial") public class FileUploadStatus implements Serializable { private int fileIndex;//當前檔案序號 private float uploadFileSize;//當前已上傳大小 private int percent;//上傳進度 private float fileSize;//檔案總大小 public int getFileIndex() { return fileIndex; } public void setFileIndex(int fileIndex) { this.fileIndex = fileIndex; } public float getUploadFileSize() { return uploadFileSize; } public void setUploadFileSize(float uploadFileSize) { this.uploadFileSize = uploadFileSize; } public int getPercent() { return percent; } public void setPercent(int percent) { this.percent = percent; } public float getFileSize() { return fileSize; } public void setFileSize(float fileSize) { this.fileSize = fileSize; } }
4、前臺頁面package cn.test; import java.io.BufferedInputStream; import java.io.BufferedOutputStream; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; import java.io.OutputStream; import java.io.PrintWriter; import java.util.Calendar; import java.util.List; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; import org.apache.struts2.ServletActionContext; import cn.test.bean.FileUploadStatus; import com.opensymphony.xwork2.ActionSupport; @SuppressWarnings("serial") public class ProgressAction extends ActionSupport { private static final int IO_SIZE=10;//上傳字元流的大小(單位:位元組) private List<File> file; private List<String> fileFileName; private List<String> fileContentType; private float uploadFileSize=0;//已上傳大小 private float fileSize=0;//檔案總大小 private int percent=0;//進度百分比 /** * 檔案上傳 * @param src * 根檔案 * @param dst * 目標檔案 */ public void uploadFile(File src, File dst, int i){ System.out.println("進入"); uploadFileSize=0; InputStream in=null; OutputStream out=null; FileUploadStatus status=new FileUploadStatus(); HttpServletRequest request=ServletActionContext.getRequest(); HttpSession session=request.getSession(); try { in=new BufferedInputStream(new FileInputStream(src), IO_SIZE); out=new BufferedOutputStream(new FileOutputStream(dst), IO_SIZE); fileSize=in.available(); if((fileSize/1024/1024)>2){ return; } byte[] buffer=new byte[IO_SIZE]; int len=0; while((len=in.read(buffer))>0){ out.write(buffer, 0, len); uploadFileSize+=len; percent=(int) (uploadFileSize/fileSize*100);//上傳百分比 status.setFileIndex(i); status.setFileSize(fileSize); status.setUploadFileSize(uploadFileSize); status.setPercent(percent); System.out.println("fileIndex:"+status.getFileIndex()+"fileSize:"+fileSize+"percent:"+percent+"uploadFileSize:"+uploadFileSize); session.setAttribute("status", status); } } catch (IOException e) { e.printStackTrace(); } finally { if(null!=in){ try { in.close(); } catch (IOException e) { e.printStackTrace(); } } if(null!=out){ try { out.close(); } catch (IOException e) { e.printStackTrace(); } } } } /** * 上傳檔案 * @return */ public String filesUpload(){ System.out.println("進入"); try{ String dstPath=ServletActionContext.getServletContext().getRealPath("/fileupload"); Calendar cal=Calendar.getInstance(); int year=cal.get(Calendar.YEAR); int month=cal.get(Calendar.MONTH)+1; int day=cal.get(Calendar.DAY_OF_MONTH); for(int i=0;i<fileFileName.size();i++){ File src=file.get(i); File dst=new File(dstPath+"/"+year+"/"+month+"/"+day); if(!dst.exists()){ dst.mkdirs(); } dst=new File(dst,"\\"+fileFileName.get(i)); uploadFile(src, dst, i); } return null; }catch (Exception e) { e.printStackTrace(); return "error"; } } /** * ajax獲取檔案上傳進度狀態 * @return */ public String getUploadStatus(){ System.out.println("ddddd"); HttpServletRequest request=ServletActionContext.getRequest(); HttpSession session=request.getSession(); FileUploadStatus status=(FileUploadStatus) session.getAttribute("status"); if(status!=null){ try{ HttpServletResponse response=ServletActionContext.getResponse(); PrintWriter out=response.getWriter(); out.print("{\"fileIndex\":"+status.getFileIndex() +",\"percent\":"+status.getPercent() +",\"uploadFileSize\":"+status.getUploadFileSize() +",\"fileSize\":"+status.getFileSize()+"}"); System.out.println("{\"fileIndex\":"+status.getFileIndex() +",\"percent\":"+status.getPercent() +",\"uploadFileSize\":"+status.getUploadFileSize() +",\"fileSize\":"+status.getFileSize()+"}"); out.close(); session.removeAttribute("status"); return null; }catch (Exception e) { e.printStackTrace(); return "error"; } }else{ return null; } } public List<File> getFile() { return file; } public void setFile(List<File> file) { this.file = file; } public List<String> getFileFileName() { return fileFileName; } public void setFileFileName(List<String> fileFileName) { this.fileFileName = fileFileName; } public List<String> getFileContentType() { return fileContentType; } public void setFileContentType(List<String> fileContentType) { this.fileContentType = fileContentType; } }
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
request.setAttribute("bp",basePath);
%>
<%@taglib uri="/struts-tags" prefix="s" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'test1.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<script type="text/javascript" src="./jquery-1.7.1.js"></script>
<body>
<div id="imgDivs">
</div>
<div id="progressBarTips" style="height: 10px; width: 200px; text-align: center; font-size: 12px;"></div>
<br />
<span id="speed" style="font-size: 12px;"></span>
<br />
<form action="${bp}imgfile/uploadfilesUpload.html" method="post" enctype="multipart/form-data" target="upload-target">
<input type="file" name="file" onchange="perImg(this);" multiple="multiple" accept="image/*"/>
<button type="submit" value="上傳" id="sub" onclick="return showProgress();">上傳</button>
</form>
日誌:<br/>
<span id="tipsText" style="color: red; font-size: 12px;"></span>
<iframe frameborder="0" style="height: 0px; width: 0px;" id="upload-target" name="upload-target"></iframe>
</body>
</html>
5、javascript程式碼
<script type="text/javascript">
var imgSum=0;//圖片總數
var finished=false;//是否長傳完成
var nextUploadFileSize=0;//上一次已上傳檔案大小
var nowUploadFileSize=0;//當前上傳檔案大小
var fileIndex=0;//圖片序號
function perImg(obj) {
var filepath = ""; //檔案路徑
var agent = window.navigator.userAgent;
var isIE7 = agent.indexOf('MSIE 7.0') != -1;
var isIE8 = agent.indexOf('MSIE 8.0') != -1;
if (!obj.value.match(/.jpg|.gif|.png|.bmp|.jpeg/i)) {
alert('圖片格式無效!');
return;
}
var fileList=obj.files;
alert(fileList.length);
if(fileList.length>6){
alert("一次最多隻能上傳6張圖片!");
}else{
imgSum=fileList.length;
for(var i=0;i<fileList.length;i++){
alert(fileList[i].size);
alert(obj.value);
var file_names=obj.value.replace(/[ ]/g,"").split(",");
var file_size=fileList[i].size;
if(((file_size/1024)/1024)<=2){
var img_div=$("<div/>");
var img_obj=$("<img style='width: 80px; height: 85px; border: 0px;'/>");
$(img_obj).attr("src",window.URL.createObjectURL(fileList[i]));
$(img_div).append(img_obj);
var img_progress=$("<div id='img_progress_"+i+"' style='background-color: red; height: 10px; width: 0px;'></div>")
var img_upload_tip=$("<div id='img_upload_tip_"+i+"' style='height: 10px; width: 100px; text-align: center; font-size: 12px;'></div>");
$("#imgDivs").append(img_div);
$("#imgDivs").append(img_upload_tip);
$("#imgDivs").append(img_progress);
}else{
alert("圖片"+file_names[i]+"大於2M");
}
}
}
}
</script>
6、監聽js事件
//開啟進度監聽
function showProgress(){
$("#sub").attr("disabled","disabled");
finished=false;
callBack();
}
//日誌方法
function logText(msg){
$("#tipsText").append(new Date().getTime()+":"+msg+"<br/>");
}
//回撥函式,獲取上傳進度資訊
function callBack(){
$.post("${bp}imgfile/uploadgetUploadStatus.html",{},function(data){
if(data!=null){
logText("1111111111111111111111111111111111111");
if(data.percent==100 && fileIndex==(imgSum-1)){
logText("2222222222222222222222222222222222222222222");
//最後一張上傳完畢,將finished設為true
finished=true;
}else{
finished=false;
}
var width=data.percent+"%";
nowUploadFileSize=data.uploadFileSize;
var speed=((nowUploadFileSize-nextUploadFileSize)/1024/10)*1000;
nextUploadFileSize=data.uploadFileSize;
if(speed>1024){
$("#speed").text("速度:"+(speed/1024).toFixed(1)+"M/秒");
}else{
$("#speed").text("速度:"+speed.toFixed(2)+"K/秒");
}
$("#img_upload_tip_"+data.fileIndex).text(width);
$("#img_progress_"+data.fileIndex).css({width:(data.percent)+"px"});
//非最後一張上傳完畢,將下一張圖片序號賦值給fileIndex
if(fileIndex!=data.fileIndex && fileIndex!=(imgSum-1)){
logText("333333333333333333333333333333333333333333上傳成功!");
$("#img_upload_tip_"+(data.fileIndex-1)).text("上傳成功!");
$("#img_progress_"+(data.fileIndex-1)).css({width:"100px"});
}
fileIndex=data.fileIndex;
}
if(finished && fileIndex==(imgSum-1)){
logText("555555555555555555555555555555555555555555555上傳成功!");
//最後一張上傳完畢,方法終結
$("#img_upload_tip_"+data.fileIndex).text("上傳成功!");
$("#img_progress_"+(data.fileIndex-1)).css({width:"100px"});
return;
}else{
logText("66666666666666666666666666666666666666666666");
//迭代隔10毫秒執行回撥函式,獲取上傳進度資訊
setTimeout('callBack()',10);
}
},"json");
}
7、執行截圖