|
|
@@ -43,6 +43,8 @@ body {
|
|
|
-webkit-transform: translateY(20px);
|
|
|
transform: translateY(20px);
|
|
|
opacity: 0;
|
|
|
+ text-align: center;
|
|
|
+ margin: 0px auto;
|
|
|
}
|
|
|
.upload .upload-files header {
|
|
|
background: #4db6ac;
|
|
|
@@ -345,7 +347,7 @@ body {
|
|
|
-webkit-transform: translateY(15px);
|
|
|
transform: translateY(15px);
|
|
|
opacity: 0;
|
|
|
- margin-left: calc(50% - 40px);
|
|
|
+ /*margin-left: calc(50% - 40px);*/
|
|
|
}
|
|
|
.upload .upload-files footer .importar.active {
|
|
|
-webkit-transition: opacity .5s 1.5s ease, -webkit-transform .5s 1.5s ease;
|
|
|
@@ -432,7 +434,7 @@ body {
|
|
|
<div class="list-files">
|
|
|
<!-- template -->
|
|
|
</div>
|
|
|
- <button class="importar" onclick="UpladFile()">UPDATE FILES</button>
|
|
|
+ <button class="importar" onclick="UpladFile()">上传</button>
|
|
|
<!-- <button class="importar" onclick="cancleUploadFile()">CALCLE FILES</button>-->
|
|
|
</footer>
|
|
|
</div>
|
|
|
@@ -442,7 +444,7 @@ body {
|
|
|
var xhr;
|
|
|
function UpladFile() {
|
|
|
var fileObj = document.getElementById("file").files[0]; // js 获取文件对象
|
|
|
- // var url = "http://127.0.0.1:8080" + "/generalReportTemplate"; // 接收上传文件的后台地址
|
|
|
+ // var url = "http://localhost:8080" + "/api/report/generalReportTemplate"; // 接收上传文件的后台地址
|
|
|
var url = "http://106.14.81.62:8080" + "/api/report/generalReportTemplate"; // 接收上传文件的后台地址
|
|
|
|
|
|
var form = new FormData(); // FormData 对象
|
|
|
@@ -452,9 +454,26 @@ body {
|
|
|
xhr.open("post", url, true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
|
|
|
xhr.onload = uploadComplete; //请求完成
|
|
|
xhr.onerror = uploadFailed; //请求失败
|
|
|
+ xhr.upload.onprogress = progressFunction; // 添加 监听函数
|
|
|
xhr.send(form); //开始上传，发送form数据
|
|
|
}
|
|
|
|
|
|
+ // 处理上传进度
|
|
|
+ function progressFunction(e){
|
|
|
+ var progress_bar = document.getElementById("progress_bar");
|
|
|
+ var loading_dom = document.getElementById("loading");
|
|
|
+ var loading = Math.round(e.loaded / e.total * 100);
|
|
|
+ // console.log("loading::", loading);
|
|
|
+
|
|
|
+ if(loading === 100){
|
|
|
+ loading_dom.innerHTML = "上传成功";
|
|
|
+ }else{
|
|
|
+ loading_dom.innerHTML = "上传进度"+loading+"%"
|
|
|
+ }
|
|
|
+
|
|
|
+ progress_bar.style.width = String(loading * 3) + "px";
|
|
|
+ }
|
|
|
+
|
|
|
//上传成功响应
|
|
|
function uploadComplete(evt) {
|
|
|
//服务断接收完文件返回的结果
|
|
|
@@ -466,7 +485,7 @@ body {
|
|
|
// } else {
|
|
|
// alert("上传失败！");
|
|
|
// }
|
|
|
- alert("上传成功！");
|
|
|
+ alert("服务器模板替换成功！");
|
|
|
}
|
|
|
|
|
|
//上传失败
|
|
|
@@ -500,7 +519,15 @@ App.init = (function() {
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>`)
|
|
|
- .join("")}`;
|
|
|
+ .join("")}`+`
|
|
|
+ <div style="text-align: left;display: inline-block;width: 300px; height: 20px; border: 1px solid #4EB6AC; border-radius: 5px;position: relative">
|
|
|
+ <div id="progress_bar" style="display: inline-block; width: 0px; height: 20px;background-color: #05E1BA"></div>
|
|
|
+ <div style="text-align: center;width: 300px;position: absolute; top: 0; font-size:14px; color: #4EB6AC">
|
|
|
+ <div id="loading">
|
|
|
+ 上传进度0%
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>`;
|
|
|
|
|
|
$("#drop").classList.add("hidden");
|
|
|
$("footer").classList.add("hasFiles");
|
|
|
@@ -549,7 +576,15 @@ App.init = (function() {
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>`)
|
|
|
- .join("")}`;
|
|
|
+ .join("")}`+`
|
|
|
+ <div style="text-align: left;display: inline-block;width: 300px; height: 20px; border: 1px solid #fff; border-radius: 2px;position: relative">
|
|
|
+ <div id="progress_bar" style="display: inline-block; width: 0px; height: 20px;background-color: #05EED8"></div>
|
|
|
+ <div style="text-align: center;width: 300px;position: absolute; top: 0; font-size:16px; color: #413F43">
|
|
|
+ <div id="loading">
|
|
|
+ 上传进度0%
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>`;
|
|
|
|
|
|
$("#drop").classList.add("hidden");
|
|
|
$("footer").classList.add("hasFiles");
|
|
|
@@ -577,14 +612,14 @@ App.init = (function() {
|
|
|
};
|
|
|
|
|
|
//upload more
|
|
|
- $(".importar").addEventListener("click", () => {
|
|
|
- $(".list-files").innerHTML = "";
|
|
|
- $("footer").classList.remove("hasFiles");
|
|
|
- $(".importar").classList.remove("active");
|
|
|
- setTimeout(() => {
|
|
|
- $("#drop").classList.remove("hidden");
|
|
|
- }, 500);
|
|
|
- });
|
|
|
+ // $(".importar").addEventListener("click", () => {
|
|
|
+ // $(".list-files").innerHTML = "";
|
|
|
+ // $("footer").classList.remove("hasFiles");
|
|
|
+ // // $(".importar").classList.remove("active");
|
|
|
+ // // setTimeout(() => {
|
|
|
+ // // $("#drop").classList.remove("hidden");
|
|
|
+ // // }, 500);
|
|
|
+ // });
|
|
|
|
|
|
// input change
|
|
|
$("input[type=file]").addEventListener("change", handleFileSelect);
|
