From e61f63ce1034b5af9d230f9c32c0d7389727713a Mon Sep 17 00:00:00 2001 From: yimi Date: Sat, 18 Nov 2023 02:40:59 +0800 Subject: [PATCH] multiple --- assets/templates/files.tmpl | 2 +- assets/templates/footer.tmpl | 94 ++++++++++++++++++++++-------------- assets/templates/images.tmpl | 4 +- 3 files changed, 62 insertions(+), 38 deletions(-) diff --git a/assets/templates/files.tmpl b/assets/templates/files.tmpl index b643ba1..8659c8a 100644 --- a/assets/templates/files.tmpl +++ b/assets/templates/files.tmpl @@ -1,6 +1,6 @@ {{template "public/header" .}}

上传文件到 Telegram

+ type="file" name="image" id="uploadFile" class="custom-file-input" multiple>
上传中...
{{template "public/footer" .}} diff --git a/assets/templates/footer.tmpl b/assets/templates/footer.tmpl index 18caf55..fed768f 100644 --- a/assets/templates/footer.tmpl +++ b/assets/templates/footer.tmpl @@ -3,7 +3,7 @@ function uploadFile(file) { var limit = 10 * 1024 * 1024; if (file.size <= limit) { - uploadImg(file,1).then((url) => { + uploadImg(file, 1).then((url) => { // 处理上传成功的情况 console.log(url); }).catch((error) => { @@ -18,10 +18,10 @@ function uploadNextChunk() { if (start < file.size) { var chunk = file.slice(start, end); - return uploadImg(chunk,0) + return uploadImg(chunk, 0) .then((url) => { // 处理上传成功的情况 - temp = temp+'\n'+ url.replace(/^\/d\//, ''); // 每次改变值都换行 + temp = temp + '\n' + url.replace(/^\/d\//, ''); // 每次改变值都换行 start = end; end = Math.min(start + chunkSize, file.size); return uploadNextChunk(); // 上传下一个块 @@ -29,7 +29,7 @@ .catch((error) => { // 处理上传失败的情况 console.error(error); - var t = $('
上传失败('+e.message+')
'); + var t = $('
上传失败(' + e.message + ')
'); $("#response").prepend(t); return Promise.reject("Upload failed"); // 终止上传 }); @@ -39,7 +39,7 @@ } var temp = "tgstate-blob"; - temp = temp+'\n' + file.name; + temp = temp + '\n' + file.name; uploadNextChunk() .then(() => { console.log(temp); // 所有块上传完成后打印 @@ -54,20 +54,18 @@ }); } } - function uploadImg(e,ms) { + function uploadImg(e, ms) { return new Promise((resolve, reject) => { var o = new FormData(); o.append("image", e); - var isImage = e.type.startsWith('image/'); $("#uploadButton").prop("disabled", !0); $("#uploadButton").text("上传中"); $("#loading").show(); - var a = window.location.protocol + "//" + window.location.hostname; "80" !== window.location.port && - 0 < window.location.port.length && - (a = a + ":" + window.location.port), + 0 < window.location.port.length && + (a = a + ":" + window.location.port), $.ajax({ type: "POST", url: a + "/api", @@ -77,8 +75,8 @@ success: function (e) { var link = a + e.message; var t; - if (e.code == 1){ - if (ms){ + if (e.code == 1) { + if (ms) { if (isImage) { t = $( '
上传成功，图片外链：
" ); - }} + } + } resolve(e.message); - }else{ - var t = $('
上传失败('+e.message+')
'); + } else { + var t = $('
上传失败(' + e.message + ')
'); reject("上传失败(" + e.message + ")"); } $("#response").prepend(t); @@ -142,39 +141,64 @@ }); }); } + function readAndUploadFile(file) { + var reader = new FileReader(); + reader.onload = function (e) { + // e.target.result 包含读取的文件内容 + var fileContent = e.target.result; + // 调用上传文件的函数 + uploadFile(file, fileContent); + }; + // 以文本形式读取文件内容 + reader.readAsText(file); + } document.addEventListener("paste", function (e) { for (var o = e.clipboardData.items, t = 0; t < o.length; t++) { var a, n = o[t]; -1 !== n.type.indexOf("image") && - ((a = n.getAsFile()), - $("#uploadFileLabel") - .text("已选择剪贴板文件") - .css("background-color", "#0056b3"), - uploadFile(a)); + ((a = n.getAsFile()), + $("#uploadFileLabel") + .text("已选择剪贴板文件") + .css("background-color", "#0056b3"), + uploadFile(a)); } }), $(document).ready(function () { $("#uploadFile").change(function () { - var e = $(this).val().split("\\").pop(); - e - ? $("#uploadFileLabel") - .text("已选择文件: " + e) - .css("background-color", "#0056b3") - : $("#uploadFileLabel") + var files = $(this)[0].files; + if (files.length > 0) { + if (files.length === 1) { + $("#uploadFileLabel") + .text("已选择文件: " + files[0].name) + .css("background-color", "#0056b3"); + } else { + $("#uploadFileLabel") + .text("已选择多个文件") + .css("background-color", "#0056b3"); + } + } else { + $("#uploadFileLabel") .text("选择文件") .css("background-color", "#007BFF"); - }), - $("#uploadButton").click(function () { - var e = document.getElementById("uploadFile").files[0]; - e ? uploadFile(e) : alert("请选择一个文件"); - }); + } + }); + $("#uploadButton").click(function () { + var input = document.getElementById("uploadFile"); + if (input.files.length > 0) { + for (var i = 0; i < input.files.length; i++) { + readAndUploadFile(input.files[i]); + } + } else { + alert("请选择一个文件"); + } + }); }); - + - + diff --git a/assets/templates/images.tmpl b/assets/templates/images.tmpl index c180677..5fff08b 100644 --- a/assets/templates/images.tmpl +++ b/assets/templates/images.tmpl @@ -1,6 +1,6 @@ {{template "public/header" .}} -

上传图片到 Telegram

上传中...