<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<title>檔案下載下傳</title>
</head>
<body>
<!--頭部-->
<header id="hui-header" class="hui-header">
<div id="hui-back"></div>
<h1>檔案下載下傳 </h1>
<div class="hui_iconm"><span class="iconfont"></span></div>
</header>
<div class="hui-wrap">
<div style="padding:20px;">
<div style="line-height:38px;">下載下傳狀态</div>
<div class="progress">0%</div>
</div>
<div style="padding:20px;">
<button id="download" onclick="download('Snip_V2.0_5771.dmg', 'http://snip.qq.com/resources/Snip_V2.0_5771.dmg');" class="mui-btn-blue mui-pull-right">開始下載下傳</button>
</div>
</div>
<script>
function download(filename, filepath) {
if (window.plus) {//支援plus
//判斷檔案是否已經下載下傳
plus.io.resolveLocalFileSystemURL(
'_downloads/' + filename,
function (entry) {//如果已存在檔案，則打開檔案
if (entry.isFile) {
hui.toast("正在打開檔案...");
plus.runtime.openFile('_downloads/' + filename);
}
}, function () {//如果未下載下傳檔案，則下載下傳後打開檔案
var dtask = plus.downloader.createDownload(filepath, { filename: '_downloads/' + filename }, function (d, status) {
if (status == 200) {
plus.runtime.openFile('_downloads/' + filename);
}
else {
hui.toast("下載下傳失敗: " + status);
}
});
dtask.addEventListener("statechanged", function (task, status) {
if (!dtask) { return; }
switch (task.state) {
case 1:
hui.toast("開始下載下傳...");
break;
case 2:
hui.toast("正在下載下傳...");
break;
case 3: // 已接收到資料
var progressVal = (task.downloadedSize / task.totalSize) * 100;
//psb1.progressbar({ progress: progressVal }).show();
//dstatus[0].innerHTML = task.downloadedSize + '/' + task.totalSize;
//hui.toast('下載下傳進度：' + (task.downloadedSize + '/' + task.totalSize));
if (hui('.progress').length > 0) {
hui('.progress').html(parseInt(progressVal) + '%');
}
break;
case 4:
dtask = null;
if (hui('.progress').length > 0) {
hui('.progress').html('0%');
}
hui.toast("正在打開檔案...");
break;
}
});
dtask.start();
}
);
} else {//不支援plus
window.open(filepath);
}
}
<script/>
</body>
</html>
![Spring MVC 自學雜記（五） -- SpringMVC與前台的json資料互動[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)