Struts2 利用jquery.ajax实现文件上传并监控上传进度
Struts2 使用jquery.ajax实现文件上传并监控上传进度
html 的内容
<body>
<form action="${pageContext.request.contextPath }/upload/upFile.action" method="post" enctype="multipart/form-data" id="form">
table_hash:<input type="text" name="table_hash" value="ABCD"><br>
table_date:<input type="text" name="table_date" value="2018-01-01"><br>
file_hash:<input type="text" name="file_hash" value="123456"><br>
file:<input type="file" name="file"><br>
<input type="button" value="ajax_sublime"><br>
<span>span>
form>
body>javascript 的内容 #记得导入jquery.js
$("input[type=button]").click(function() {
var formData = new FormData(document.getElementById("form"));//表单id
var upload_start_time; // 开始上传的时间(毫秒)
var upload_estimate_time; // 估算剩余上传完成的时间(秒)
var upload_file_loaded; // 已经上传的百分比
var upload_rate; // 上传速率(KB/秒)
var upload_rate_unit = "B/s";
$.ajax({
url: "${pageContext.request.contextPath }/upload/up.action" ,
type: 'POST',
data: formData,
async: true,
cache: false,
contentType: false,
processData: false,
success: function (result) { // 上传完成, 并接受服务器返回的数据
console.log(result);
var upload_now_time = new Date().getTime(); // 获取当前时间
var total_time = (upload_now_time - upload_start_time) / 1000; // 毫秒 转 秒
/*
下面写回显的代码
*/
$("span").html("完成! 耗时: " + total_time + "秒");
},
dataType: "json",
xhr: function(){// 这里我们先拿到jQuery产生的 XMLHttpRequest对象，为其增加 progress 事件绑定，然后再返回交给ajax使用
var xhr = $.ajaxSettings.xhr();
xhr.upload.onprogress = function (evt) {
/* 1. event.total: 需要传输的总字节，
2. event.loaded: 已经传输的字节。
3. event.lengthComputable: 不为真，则event.total等于0
*/
if (evt.lengthComputable) {
/*
计算已经上传的百分比
*/
upload_file_loaded = Math.round(evt.loaded / evt.total * 100);
/*
估算大概需要花费的时间
*/
var upload_now_time = new Date().getTime(); // 获取当前时间
var time = (upload_now_time - upload_start_time) / 1000; // 毫秒 转 秒
var data = evt.total - evt.loaded; // 剩余上传的数据有多少B, 后面 转 KB 转 MB
upload_rate = evt.loaded / time; // 多少B/秒
upload_rate_unit = "B/s"; // 单位
upload_estimate_time = data / upload_rate; // 估算剩余上传完成的时间(秒)
if (evt.loaded / 1024 / 1024 > 1) {
upload_rate = evt.loaded / 1024 / 1024 / time; // 多少MB/秒
upload_rate_unit = "MB/s"; // 单位
} else if (evt.loaded / 1024 > 1) {
upload_rate = evt.loaded / 1024 / time; // 多少KB/秒
upload_rate_unit = "KB/s"; // 单位
}
// console.log("-> " + upload_file_loaded + "% | " + upload_rate + upload_rate_unit + " | " + upload_estimate_time + "秒");
/*
<下面写回显的代码>
upload_file_loaded的值代表 已上传的数据 占 总数据 的百分比
upload_rate的值代表的值代表: 上传速率
upload_rate_unit的值代表: 速率的单位
upload_estimate_time的值代表: 剩余数据上传完毕预计还需要多少秒
*/
$("span").html("-> " + upload_file_loaded + "% | " + upload_rate + upload_rate_unit + " | " + upload_estimate_time + "秒");
}
};//【上传进度调用方法实现】
xhr.upload.onloadstart = function(){//上传开始执行方法
upload_start_time = new Date().getTime(); //设置上传开始时间(毫秒)
upload_rate = 0; // 设置上传速率(KB/秒)
upload_file_loaded = 0;// 设置上传开始时，以上传的文件大小为0%
upload_estimate_time = 0; // 设置估算剩余上传完成的时间(秒)
// console.log("-> " + upload_file_loaded + "% | " + upload_rate + upload_rate_unit + " | " + upload_estimate_time + "秒");
/*
<下面写回显的代码>
upload_file_loaded的值代表 已上传的数据 占 总数据 的百分比
upload_rate的值代表的值代表: 上传速率
upload_rate_unit的值代表: 速率的单位
upload_estimate_time的值代表: 剩余数据上传完毕预计还需要多少秒
*/
$("span").html("-> " + upload_file_loaded + "% | " + upload_rate + upload_rate_unit + " | " + upload_estimate_time + "秒");
};
return xhr;
},
});
});复制了就能用, 自己在多行注释下面接着写你自己希望的回显代码就行了, ctrl+f
/*
<下面写回显的代码>
upload_file_loaded的值代表 已上传的数据 占 总数据 的百分比
upload_rate的值代表的值代表: 上传速率
upload_rate_unit的值代表: 速率的单位
upload_estimate_time的值代表: 剩余数据上传完毕预计还需要多少秒
*/struts.xml 中对应package的配置
<package name="upload" namespace="/upload" extends="struts-default, json-default">
<action name="upFile" class="com.xx.UpLoad" method="upFile">
<result type="json">
<param name="root">jsonMapparam>
result>
action>
package>对应的action代码 (UpLoad.java)
public class UpLoad implements Action, SessionAware {
// session
private Map session;
// 文件属性
private File file;
private String fileFileName;
private String fileContentType;
// 返回值
private Map jsonMap;
@Override
public String execute() throws Exception {
// TODO Auto-generated method stub
this.session.put("username", "tester");
return SUCCESS;
}
public String upFile() {
String username = (String)this.session.get("username");
String file_dirs_path = "D://cnpp/" + File.separator + username;
File dirs = new File(file_dirs_path);
if (!dirs.exists()) {
dirs.mkdirs();
}
String file_url = file_dirs_path + File.separator + fileFileName;
System.out.println("file_url: " + file_url);
FileInputStream io = new FileInputStream(file);
FileOutputStream op = new FileOutputStream(file_url);
IOUtils.copy(io, op);
io.close();
op.close();
this.jsonMap = new HashMap();
jsonMap.put("file_name", this.fileFileName);
jsonMap.put("file_type", this.fileContentType);
return SUCCESS;
}
@Override
public void setSession(Map session_) {
// TODO Auto-generated method stub
this.session = session_;
}
// getter/setter
public File getFile() {
return file;
}
public void setFile(File file) {
this.file = file;
}
public String getFileFileName() {
return fileFileName;
}
public void setFileFileName(String fileFileName) {
this.fileFileName = fileFileName;
}
public String getFileContentType() {
return fileContentType;
}
public void setFileContentType(String fileContentType) {
this.fileContentType = fileContentType;
}
public Map getJsonMap() {
return jsonMap;
}
public void setJsonMap(Map jsonMap) {
this.jsonMap = jsonMap;
}
} 用到的框架有 struts2, jquery