Skip to content

Commit

Permalink
multiple
Browse files Browse the repository at this point in the history
  • Loading branch information
@csznet
csznet committed Nov 17, 2023
1 parent 6ca420e commit e61f63c
Show file tree
Hide file tree
Showing 3 changed files with 62 additions and 38 deletions.
2 changes: 1 addition & 1 deletion assets/templates/files.tmpl
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{{template "public/header" .}}
<h1>上传文件到 Telegram</h1><label for="uploadFile" id="uploadFileLabel" class="custom-file-label">选择文件</label> <input
type="file" name="image" id="uploadFile" class="custom-file-input"> <button id="uploadButton">上传</button>
type="file" name="image" id="uploadFile" class="custom-file-input" multiple> <button id="uploadButton">上传</button>
<div id="loading">上传中...</div>
<div id="response" class="ui-widget"></div>
{{template "public/footer" .}}
94 changes: 59 additions & 35 deletions assets/templates/footer.tmpl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand All @@ -18,18 +18,18 @@
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(); // 上传下一个块
})
.catch((error) => {
// 处理上传失败的情况
console.error(error);
var t = $('<div class="response-item response-error">上传失败('+e.message+')</div>');
var t = $('<div class="response-item response-error">上传失败(' + e.message + ')</div>');
$("#response").prepend(t);
return Promise.reject("Upload failed"); // 终止上传
});
Expand All @@ -39,7 +39,7 @@

}
var temp = "tgstate-blob";
temp = temp+'\n' + file.name;
temp = temp + '\n' + file.name;
uploadNextChunk()
.then(() => {
console.log(temp); // 所有块上传完成后打印
Expand All @@ -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",
Expand All @@ -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 = $(
'<div class="response-item response-success">上传成功，图片外链：<a target="_blank" href="' +
Expand All @@ -101,10 +99,11 @@
link +
"</a></div>"
);
}}
}
}
resolve(e.message);
}else{
var t = $('<div class="response-item response-error">上传失败('+e.message+')</div>');
} else {
var t = $('<div class="response-item response-error">上传失败(' + e.message + ')</div>');
reject("上传失败(" + e.message + ")");
}
$("#response").prepend(t);
Expand Down Expand Up @@ -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("请选择一个文件");
}
});
});
</script>
<a target="_blank" href="https://github.com/csznet/tgState"><svg version="1.1" id="Layer_1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="44px"
height="15px" viewBox="0 0 44 15" enable-background="new 0 0 44 15" xml:space="preserve">
<image id="image0" width="44" height="15" x="0" y="0" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAPBAMAAABtkjCqAAAABGdBTUEAALGPC/xhBQAAACBjSFJN
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="44px"
height="15px" viewBox="0 0 44 15" enable-background="new 0 0 44 15" xml:space="preserve">
<image id="image0" width="44" height="15" x="0" y="0" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAPBAMAAABtkjCqAAAABGdBTUEAALGPC/xhBQAAACBjSFJN
AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAKlBMVEUAAAD/////ZgCZmWb/
aAT/+vj/agj//fz8/Pr9/f36+vj/+PT/ZwOammiamlTzAAAAAWJLR0QB/wIt3gAAAAlwSFlzAAAL
EwAACxMBAJqcGAAAAAd0SU1FB+cKAw8uKd154KgAAABtSURBVBjTY2DADhgFsQABBkYlOBA2hgHS
Expand All @@ -183,7 +207,7 @@ BKkCzbYw7kSoVhRVEhRUQpgNFaaGu7GHCXYAAPxWLJi8tpSVAAAAJXRFWHRkYXRlOmNyZWF0ZQAy
MDIzLTEwLTAzVDE1OjQ2OjQxKzAwOjAwZpEQ6AAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMy0xMC0w
M1QxNTo0Njo0MSswMDowMBfMqFQAAAAodEVYdGRhdGU6dGltZXN0YW1wADIwMjMtMTAtMDNUMTU6
NDY6NDErMDA6MDBA2YmLAAAAAElFTkSuQmCC" />
</svg></a>
</svg></a>
</body>

</html>
Expand Down
4 changes: 2 additions & 2 deletions assets/templates/images.tmpl
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{{template "public/header" .}}
<h1>上传图片到 Telegram</h1><label for="uploadFile" id="uploadFileLabel" class="custom-file-label">选择文件</label> <input
type="file" name="image" id="uploadFile" accept=".jpg, .jpeg, .png" class="custom-file-input"> <button
<h1>上传图片到 Telegram</h1><label for="uploadFile" id="uploadFileLabel" class="custom-file-label">选择图片</label> <input
type="file" name="image" id="uploadFile" accept=".jpg, .jpeg, .png" class="custom-file-input" multiple> <button
id="uploadButton">上传</button>
<div id="loading">上传中...</div>
<div id="response" class="ui-widget"></div>
Expand Down

0 comments on commit e61f63c

Please sign in to comment.