简述Java异步上传文件的三种方式
5星 · 超过95%的资源 5 浏览量
2020-09-02
16:08:02
上传
评论
收藏 78KB PDF 举报 
简述简述Java异步上传文件的三种方式异步上传文件的三种方式
主要为大家详细介绍了Java异步上传文件的三种方式，感兴趣的小伙伴们可以参考一下
本文为大家分享了三种Java异步上传文件方式，供大家参考，具体内容如下
用第三方控件，如用第三方控件，如Flash,ActiveX等浏览器插件上传。等浏览器插件上传。
使用隐藏的使用隐藏的iframe模拟异步上传。模拟异步上传。
使用使用XMLHttpRequest2来实现异步上传。来实现异步上传。
第一种使用浏览器插件上传，需要一定的底层编码功底，在这里我就不讲了，以免误人子弟，提出这点大家可以自行百度。
第二种使用隐藏的隐藏的iframe模拟异步上传模拟异步上传。为什么在这里说的是模拟呢?因为我们其实是将返回结果放在了一个隐藏的iframe
中，所以才没有使当前页面跳转，感觉就像是异步操作一样。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>隐藏的iframe上传文件</title>
<script type="text/javascript" src="jquery路径..."></script>
</head>
<body>
<iframe name="frm" style="display:none"></iframe>
<form action="/upload2" enctype="multipart/form-data" method="post" target="frm" onsubmit="loading(true);">
<p id="upfile">附件：
<input type="file" name="myfile" style="display: inline">
</p>
<p id="upbtn">
<input style="padding-left:50px;padding-right: 50px;" type="submit" value="异步上传">
<span id="uptxt" style="display: none">正在上传...</span>
</p>
</form>
<div id="flist" style="border:1px dotted darkgray;"></div>
<script>
// 上传完成后的回调
function uploadFinished(fileName) {
addToFlist(fileName);
loading(false);
}
function addToFlist(fname) {
var temp = ["<p id='" + fname + "'>",
fname,
"<button onclick='delFile(\"" + fname + "\");'>删除</button>",
"</p>"
];
$("#flist").append(temp.join(""));
}
function loading(showloading) {
if (showloading) {
$("#uptxt").show();
} else {
$("#uptxt").hide;
}
}
</script>
</body>
</html>
这种技术有两个关键的地方:
1.form会指定target,提交的结果定向返回到隐藏的ifram中。(即form的target与iframe的name属性一致)。
2.提交完成后，iframe中页面与主页面通信，通知上传结果及服务端文件信息
如何与主页面通信呢?
我们用nodejs在接收完了文件后返回了一个window.parent.主页面定义的方法，执行后可以得知文件上传完成。代码很简单:
router.post('/upload2', multipartMiddleware, function(req, res) {
var fpath = req.files.myfile.path;
var fname = fpath.substr(fpath.lastIndexOf('\') + 1);
setTimeout(function {
var ret = ["<script>",
"window.parent.uploadFinished('" + fname + "');",
"</script>"];
res.send(ret.join(""));
}, 3000);
});
执行后可以打开开发人员选项，你会发现隐藏iframe中返回了服务器的一些数据。
- 1
- 2
前往页