let uploadArea = document.getElementById("upload-box");
let uploadFileCards = document.getElementById("upload-files");
let selectQuality = document.getElementById("selectQuality");
let selectLanguage = document.getElementById("selectLanguage");
let uploadMaxFileSize = 1024 * 1024 * 1024;
let setting = "ebook";
let action = "compress"
let languages = ""
window.onload = function () {
addUploadEventListener();
addSettingBtnListener();
};
function addSettingBtnListener() {
let btns = document.getElementsByClassName("quality");
for (let btn of btns) {
btn.addEventListener("click", function () {
for (let btn0 of document.getElementsByClassName("quality")) {
btn0.className = "checkbox quality";
}
btn.className = "checkbox quality active";
setting = btn.getAttribute("value");
});
}
btns = document.getElementsByClassName("menu");
for (let btn of btns) {
btn.addEventListener("click", function () {
for (let btn0 of document.getElementsByClassName("menu")) {
btn0.className = "checkbox menu";
}
btn.className = "checkbox menu active";
action = btn.getAttribute("value");
if (action === "compress") {
selectQuality.style.display = "block";
selectLanguage.style.display = "none";
} else if (action === "ocr") {
selectQuality.style.display = "none";
selectLanguage.style.display = "block";
}
});
}
btns = document.getElementsByClassName("language");
for (let btn of btns) {
btn.addEventListener("click",function(){
if(btn.className.indexOf("active") === -1){
btn.className = "checkbox language active"
}else{
btn.className = "checkbox language"
}
languages = ""
for(let btn0 of document.getElementsByClassName("language")){
if(btn0.className.indexOf("active") !== -1){
languages = languages + "," + btn0.getAttribute("value")
}
}
languages = languages.substr(1)
})
}
}
function addUploadEventListener() {
uploadArea.addEventListener("click", () => {
let fileInput = document.createElement("input");
fileInput.setAttribute("type", "file");
fileInput.setAttribute("style", "visibility:hidden");
fileInput.setAttribute("multiple", "multiple");
fileInput.setAttribute("accept", "application/pdf");
fileInput.addEventListener("change", function () {
for (let i = 0; i < this.files.length && i < 10; i++) {
uploadFile(this.files[i]);
}
});
fileInput.click();
});
}
function wellSize(num) {
if (num <= 1024) {
return num + "byte";
}
if (num <= 1024 * 1024) {
return (num / 1024).toFixed(2) + "kb";
}
if (num <= 1024 * 1024 * 1024) {
return (num / 1024 / 1024).toFixed(2) + "mb";
}
if (num <= 1024 * 1024 * 1024 * 1024) {
return (num / 1024 / 1024 / 1024).toFixed(2) + "gb";
}
return (num / 1024 / 1024 / 1024 / 1024).toFixed(2) + "tb";
}
function addUploadCard(callback) {
callback = callback || function () {};
let addCard = () => {
let cardHtml = `
`;
let card = document.createElement("div");
card.className = "upload-file-card";
card.innerHTML = cardHtml;
uploadFileCards.prepend(card);
let progressBar = card.getElementsByClassName("progress-bar")[0];
let errReason = card.getElementsByClassName("errorReason")[0];
let uploadErrorCover = card.getElementsByClassName("upload-error-cover")[0];
let downloadButton = card.getElementsByClassName("download_button")[0];
let fileinfo = card.getElementsByClassName("fileinfo")[0];
let fileLinksBox = card.getElementsByClassName("file-links-box")[0];
let setErrorInfo = function (errorText) {
progressBar.style.background = "#F56C6C";
errReason.innerText = errorText;
uploadErrorCover.style.display = "block";
};
callback(
(percent) => {
progressBar.style.width = percent + "%";
},
(taskID) => {
let timer = setInterval(() => {
getTaskStatus(
taskID,
function (task) {
if (task.status === 3 || task.status === 4) {
clearInterval(timer);
}
if (task.status < 3) {
// 下载进度
progressBar.style.background = "#ffc940";
progressBar.style.width = task.progress * 100 + "%";
}
if (task.status === 3) {
progressBar.style.background = "#ffc940";
progressBar.style.width = task.progress * 100 + "%";
downloadButton.setAttribute(
"href",
`/download?taskId=${taskID}`
);
if(task.taskType === "compress"){
fileinfo.innerHTML = `${task.name} 原大小:${wellSize(
task.size
)} 压缩后大小:${wellSize(task.size2)}`;
fileLinksBox.style.display = "block";
}else if(task.taskType === "ocr"){
fileinfo.innerHTML = `${task.name} 转换完毕`;
fileLinksBox.style.display = "block";
}
}
if (task.status === 4) {
progressBar.style.background = "red";
progressBar.style.width = task.progress * 100 + "%";
setErrorInfo(`转换失败，原因是:${task.reason}`);
}
},
function () {
clearInterval(timer);
setErrorInfo("转换失败");
}
);
}, 500);
},
(reason) => {
setErrorInfo(reason);
}
);
};
addCard();
}
function getTaskStatus(taskID, callback, errCalback) {
callback = callback || function () {};
errCalback = errCalback || function () {};
let request = new XMLHttpRequest();
request.open("GET", `/api/task?taskId=${taskID}`);
request.addEventListener("load", (e) => {
let resp = JSON.parse(request.response);
callback(resp);
});
request.addEventListener("error", (e) => {
errCalback("获取状态出错");
});
request.send();
}
function uploadFile(file) {
addUploadCard((setProgress, uploadSuccess, uploadError) => {
// 检查是否允许上传
let size = file.size;
if (size > uploadMaxFileSize) {
uploadError("超过了上传文件最大限制");
return;
}
ajaxUploadFile(file, setProgress, uploadSuccess, uploadError);
});
}
function ajaxUploadFile(file, setProgress, uploadSuccess, uploadError) {
let formData = new FormData();
formData.append("file", file);
formData.append("setting", setting);
formData.append("languages", languages);
let request = new XMLHttpRequest();
request.open("POST", `/api/${action}`);
request.upload.addEventListener("progress", (e) => {
let percent_complete = (e.loaded / e.total) * 100;
setProgress(percent_complete);
});
request.addEventListener("load", (e) => {
let resp = JSON.parse(request.response);
if (request.status === 200) {
uploadSuccess(resp.taskID);
}
});
request.addEventListener("error", (e) => {
uploadError("上传出错");
});
request.send(formData);
}
function isMobile() {
var userAgentInfo = navigator.userAgent;
var mobileAgents = [
"Android",
"iPhone",
"SymbianOS",
"Windows Phone",
"iPad",
"iPod",
];
var mobile_flag = false;
for (var v = 0; v < mobileAgents.length; v++) {
if (userAgentInfo.indexOf(mobileAgents[v]) > 0) {
mobile_flag = true;
break;
}
}
var screen_width = window.screen.width;
var screen_height = window.screen.height;
if (screen_width < 500 && screen_height < 800) {
mobile_flag = true;
}
return mobile_flag;
}