修改上傳圖片套件

This commit is contained in:
dev02 2022-12-09 15:37:15 +08:00
parent 98031df604
commit 95843906fd
4 changed files with 232 additions and 112 deletions

View File

@ -92,7 +92,7 @@
<div class="col-md-6"> <div class="col-md-6">
<div class="form-group"> <div class="form-group">
<label class="form-label" for="inpFixDoCode">維修項目代碼(設備編號)</label> <label class="form-label" for="inpFixDoCode">維修項目代碼(設備編號)</label>
<select class="form-control" id="inpFixDoCode" name="inpFixDoCode" disabled> <select class="form-control" id="inpFixDoCode" name="inpFixDoCode">
<option value=''>未選擇</option> <option value=''>未選擇</option>
</select> </select>
</div> </div>
@ -143,9 +143,14 @@
<textarea class="form-control" type="text" id="inpDescription" name="inpDescription" rows="7"></textarea> <textarea class="form-control" type="text" id="inpDescription" name="inpDescription" rows="7"></textarea>
</div> </div>
</div> </div>
<div class="col-md-12 dropzone-container"> <div class="col-md-12">
<label class="form-label">上傳檔案</label> <label class="form-label">上傳檔案</label>
<div class="form-group dropzone" id="frmFileUpload"> <div id='alr_forImage' class="col-sm-12 forimage mt-2 p-0">
</div>
<div id='alr_forFile' class="col-sm-12 forfile mt-2 p-0">
</div>
<div class="form-group dropzone" id="alr_dropZone">
<div class="dz-message"> <div class="dz-message">
<div class="drag-icon-cph"> <div class="drag-icon-cph">
<i class="material-icons">backup</i> <i class="material-icons">backup</i>
@ -158,11 +163,6 @@
<div class="fallback"> <div class="fallback">
<input name="file" type="file" multiple /> <input name="file" type="file" multiple />
</div> </div>
<!--<label for="myImage" class="file-upload" style="cursor : pointer ">點擊上傳檔案</label>
<input id="myImage" class="form-control dropzone" type="file" multiple hidden />-->
</div>
<div id='forImage' class="col-sm-12 forimage mt-2 p-0">
</div> </div>
</div> </div>
</div> </div>
@ -181,10 +181,11 @@
pageAct.selSysSub = null; pageAct.selSysSub = null;
pageAct.alr_startdate = null; pageAct.alr_startdate = null;
pageAct.alr_enddate = null; pageAct.alr_enddate = null;
pageAct.imageFile = [];
first = true; first = true;
$(function () { $(function () {
$(loadEle).Loading("close"); initDropzone();
setReturn(false); setReturn(false);
setConfirm(false); setConfirm(false);
event(); event();
@ -287,10 +288,15 @@
+ alr_tableData.alarmClass.toString().split('_')[1] + "_" + alr_tableData.buildingFloorName_zh.toString().split('-')[1] + "_" + alr_tableData.sourceName_zh.toString().split('-')[0] + "_" + alr_tableData.alarmClass.toString().split('_')[1] + "_" + alr_tableData.buildingFloorName_zh.toString().split('-')[1] + "_" + alr_tableData.sourceName_zh.toString().split('-')[0] + "_"
+ alr_tableData.sourceName_zh.toString().split('-')[1]; + alr_tableData.sourceName_zh.toString().split('-')[1];
$('#inpFixDoCode').val($(`option[value*=${deviceNumber}]`).val() !== undefined ? $(`option[value*=${deviceNumber}]`).val() : "");
selUser(); selUser();
selDevice(); selDevice();
selOpeFir(); selOpeFir();
$('#inpFixDoCode option[data-sub=' + alr_tableData.alarmClass.toString().split('_')[1] + '][data-main=' + alr_tableData.alarmClass.toString().split('_')[0] + ']').attr('hidden', false);
$('#inpFixDoCode option[data-sub!=' + alr_tableData.alarmClass.toString().split('_')[1] + '][data-main!=' + alr_tableData.alarmClass.toString().split('_')[0] + ']').attr('hidden', true);
let alr_fixDoCode = $($('#inpFixDoCode option[data-sub=' + alr_tableData.alarmClass.toString().split('_')[1] + '][data-main=' + alr_tableData.alarmClass.toString().split('_')[0] + ']')[0]).val();
$('#inpFixDoCode').val(alr_fixDoCode);
}); });
} }
@ -486,7 +492,7 @@
"title": "異常類別", "title": "異常類別",
"data": "alarmClass", "data": "alarmClass",
"render": function (data) { "render": function (data) {
return data.split('_')[1]; return data.split('_')[0] + "-" + data.split('_')[1];
} }
}, },
{ {
@ -550,7 +556,7 @@
strHtml = ``; strHtml = ``;
$("#inpFixDoCode").html(); $("#inpFixDoCode").html();
$.each(res.data, (index, roleObj) => { $.each(res.data, (index, roleObj) => {
strHtml += `<option value='${roleObj.device_number}' data-floor=${roleObj.device_floor_tag} data-main=${roleObj.device_system_tag} data-sub=${roleObj.device_name_tag}>${roleObj.device_name}</option>`; strHtml += `<option value='${roleObj.device_number}' data-floor=${roleObj.device_floor_tag} data-main=${roleObj.device_system_tag} data-sub=${roleObj.device_name_tag} hidden>${roleObj.device_name}</option>`;
if (index == 0) { if (index == 0) {
pageAct.sysMain = roleObj.device_system_tag; pageAct.sysMain = roleObj.device_system_tag;
@ -598,4 +604,49 @@
} }
}, null, "POST").send(); }, null, "POST").send();
} }
//上傳檔案 dropzone
function initDropzone() {
uploader = $("#alr_dropZone").dropzone({
url: baseApiUrl + '/api/Upload',
previewsContainer: false,
addRemoveLinks: false,
dictRemoveFile: `<span class="material-icons mi-delete">delete</span>`,
dictInvalidFileType: `上傳格式錯誤`,
dictCancelUploadConfirmation: `確定要取消上傳此檔案嗎?`,
dictCancelUpload: `<span class="material-icons mi-cancel">cancel</span>`,
maxFilesize: 3,
filesizeBase: 1024,
maxFiles: 50,
acceptedFiles: ".pdf, .docx, .doc, .xls, .xlsm, .xlsx, .ppt, .pptx, .gif, .png, .jpg, .jpeg",
headers: { "Authorization": 'Bearer ' + localStorage.getItem("JWT-Authorization") },
accept: function (file, done) {
let fileHelper = new YourTeam.Utility.File();
tmpGuidArr = [];
if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
fileHelper.readAndPreviewImages(file, 'alr_forImage', 70, 70, '<span class="file-item m-1">', '<button class="btn-dark m-1" name="btnDelImg"><i class="fa fa-times"></i></button></span>');
pageAct.imageFile.map(function (v, i) { tmpGuidArr.push(v.file.guid) });
if (jQuery.inArray(file.guid, tmpGuidArr) == -1) { //not in array
let fd = new FormData();
let f = file;
fd.append('file', f);
pageAct.imageFile.push({ "ori_file_name": f.name, "save_file_name": f.guid, "file": fd.get("file") });
}
}
else if (/\.(xls?x|doc?x|ptt?x|pdf|zip|rar|7zip|txt|odt|xml|rtf|ods|odp|pps?x)$/i.test(file.name)) {
fileHelper.readAndPreviewFiles(file, 'alr_forFile', 70, 70, "<div class='file-item'><i class='fas fa-file-alt fa-2x m-1'></i>", "<button class='btn-dark m-1' name='btnDelImg'><i class='fa fa-times'></i></button></div>");
pageAct.imageFile.map(function (v, i) { tmpGuidArr.push(v.file.guid) });
if (jQuery.inArray(file.guid, tmpGuidArr) == -1) { //not in array
let fd = new FormData();
let f = file;
fd.append('file', f);
pageAct.imageFile.push({ "ori_file_name": f.name, "save_file_name": f.guid, "file": fd.get("file") });
}
}
}
});
}
</script> </script>

View File

@ -7,7 +7,7 @@
<div class="col-auto"> <div class="col-auto">
<div class="btn-group"> <div class="btn-group">
<button type="button" onclick="setType(2)" class="btn btn-secondary waves-effect waves-themed">維修</button> <button type="button" onclick="setType(2)" class="btn btn-secondary waves-effect waves-themed">維修</button>
<button type="button" onclick="setType(1)" class="btn btn-secondary waves-effect waves-themed">記錄</button> <button type="button" onclick="setType(1)" class="btn btn-secondary waves-effect waves-themed">記錄</button>
<button type="button" onclick="setType(null)" class="btn btn-secondary waves-effect waves-themed">廠商資料</button> <button type="button" onclick="setType(null)" class="btn btn-secondary waves-effect waves-themed">廠商資料</button>
</div> </div>
</div> </div>
@ -246,9 +246,14 @@
<textarea class="form-control" type="text" id="inpDescription" name="inpDescription" rows="7"></textarea> <textarea class="form-control" type="text" id="inpDescription" name="inpDescription" rows="7"></textarea>
</div> </div>
</div> </div>
<div class="col-md-12 dropzone-container"> <div class="col-md-12">
<label class="form-label">上傳檔案</label> <label class="form-label">上傳檔案</label>
<div class="form-group dropzone" id="frmFileUpload"> <div id='ope_forImage' class="col-sm-12 forimage mt-2 p-0">
</div>
<div id='ope_forFile' class="col-sm-12 forfile mt-2 p-0">
</div>
<div class="form-group dropzone" id="ope_dropZone">
<div class="dz-message"> <div class="dz-message">
<div class="drag-icon-cph"> <div class="drag-icon-cph">
<i class="material-icons">backup</i> <i class="material-icons">backup</i>
@ -261,11 +266,6 @@
<div class="fallback"> <div class="fallback">
<input name="file" type="file" multiple /> <input name="file" type="file" multiple />
</div> </div>
<!--<label for="myImage" class="file-upload" style="cursor : pointer ">點擊上傳檔案</label>
<input id="myImage" class="form-control dropzone" type="file" multiple hidden />-->
</div>
<div id='forImage' class="col-sm-12 forimage mt-2 p-0">
</div> </div>
</div> </div>
</div> </div>
@ -301,10 +301,13 @@
<script> <script>
$(function () { $(function () {
$(loadEle).Loading("close");
initDropzone();
pageAct.sub_system_tag = null; pageAct.sub_system_tag = null;
pageAct.main_system_tag = null; pageAct.main_system_tag = null;
pageAct.selSysSub = []; pageAct.selSysSub = [];
pageAct.selSysMain = []; pageAct.selSysMain = [];
pageAct.imageFile = [];
sysList(); sysList();
@ -1071,34 +1074,6 @@
}, null, "POST").send() }, null, "POST").send()
}); });
onEvent("change", "#myImage", function (e) {
var imageuploadFormOS = 0;
let fileHelper = new YourTeam.Utility.File();
//若有文字顯示,清除文字顯示
if ($('#forImage p').length > 0) {
$("#forImage").html(""); // 清除預覽
}
//console.log(this.files)
imageuploadFormOS = this.files.length;
//最多只能上傳幾張
let maxlength = $("#forImage").data("maxlength");
if (maxlength) {
if (imageuploadFormOS + $('#forImage img').length > maxlength) {
ShowModal("error", "uplImgOverLen", "無法上傳", "最多只能上傳" + maxlength + "張,您已經超出上傳數量。");
$("#myImage").val("");
return false;
}
}
if (/\.(jpe?g|png|gif)$/i.test(this.file.name))
fileHelper.readAndPreviewImages(this.files, 'forImage', 150, 70, '<div class="file-item">', '<button class="btn-info" name="btnDelImg" ><i class="fa fa-times"></i></button></div>');
$.each(this.files, function (i, v) {
let fd = new FormData();
let file = v;
fd.append('file', v);
pageAct.imageFile.push({ "ori_file_name": v.name, "save_file_name": file.guid, "file": fd.get("file") });
});
}); //變更圖片
onEvent("click", "[name=btnDelImg]", function () { onEvent("click", "[name=btnDelImg]", function () {
elem = $(this).parent(); elem = $(this).parent();
if (elem.attr('data-id')) if (elem.attr('data-id'))
@ -1108,6 +1083,11 @@
$.grep(pageAct.imageFile, function (image) { $.grep(pageAct.imageFile, function (image) {
return image.save_file_name != elem.find('img').data('savename'); return image.save_file_name != elem.find('img').data('savename');
}); });
pageAct.imageFile =
$.grep(pageAct.imageFile, function (file) {
return file.save_file_name != elem.find('a').data('savename');
});
} }
elem.remove(); elem.remove();
@ -1130,7 +1110,6 @@
selOpeFir(); selOpeFir();
errCodeList(); errCodeList();
}); });
} }
function errCodeList() { function errCodeList() {
@ -1157,61 +1136,46 @@
//上傳檔案 dropzone //上傳檔案 dropzone
function initDropzone() { function initDropzone() {
let avaUplFilsArr = $("#frmFileUpload").parents(".update").data("avauplfil"); uploader = $("#ope_dropZone").dropzone({
let uploadedFilesNameArr = []; url: baseApiUrl + '/api/Upload',
uploader = $("#frmFileUpload").dropzone({ previewsContainer: false,
addRemoveLinks: true, addRemoveLinks: false,
dictRemoveFile: `<span class="material-icons mi-delete">delete</span>`, dictRemoveFile: `<span class="material-icons mi-delete">delete</span>`,
dictInvalidFileType: `上傳格式錯誤`, dictInvalidFileType: `上傳格式錯誤`,
dictCancelUploadConfirmation: `確定要取消上傳此檔案嗎?`, dictCancelUploadConfirmation: `確定要取消上傳此檔案嗎?`,
dictCancelUpload: `<span class="material-icons mi-cancel">cancel</span>`, dictCancelUpload: `<span class="material-icons mi-cancel">cancel</span>`,
maxFilesize: 3, maxFilesize: 3,
filesizeBase: 1024, filesizeBase: 1024,
maxFiles: 5, maxFiles: 50,
acceptedFiles: ".pdf, .docx, .doc, .xls, .xlsm, .xlsx, .ppt, .pptx", acceptedFiles: ".pdf, .docx, .doc, .xls, .xlsm, .xlsx, .ppt, .pptx, .gif, .png, .jpg, .jpeg",
headers: { "Authorization": 'Bearer ' + localStorage.getItem("JWT-Authorization") },
accept: function (file, done) { accept: function (file, done) {
let fileHelper = new YourTeam.Utility.File();
tmpGuidArr = [];
if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
fileHelper.readAndPreviewImages(file, 'ope_forImage', 70, 70, '<span class="file-item m-1">', '<button class="btn-dark m-1" name="btnDelImg"><i class="fa fa-times"></i></button></span>');
if (avaUplFilsArr.findIndex(x => x.split(".")[0] == file.name.split(".")[0]) == -1) { pageAct.imageFile.map(function (v, i) { tmpGuidArr.push(v.file.guid) });
done("只能上傳諮詢師指派給您的相關檔案。"); if (jQuery.inArray(file.guid, tmpGuidArr) == -1) { //not in array
} else if (uplFiles.findIndex(x => x.name == file.name) != -1) { let fd = new FormData();
done("只能上傳一筆同檔名檔案。"); let f = file;
fd.append('file', f);
pageAct.imageFile.push({ "ori_file_name": f.name, "save_file_name": f.guid, "file": fd.get("file") });
}
} }
else { done(); } else if (/\.(xls?x|doc?x|ptt?x|pdf|zip|rar|7zip|txt|odt|xml|rtf|ods|odp|pps?x)$/i.test(file.name)) {
fileHelper.readAndPreviewFiles(file, 'ope_forFile', 70, 70, "<div class='file-item'><i class='fas fa-file-alt fa-2x m-1'></i>", "<button class='btn-dark m-1' name='btnDelImg'><i class='fa fa-times'></i></button></div>");
pageAct.imageFile.map(function (v, i) { tmpGuidArr.push(v.file.guid) });
if (jQuery.inArray(file.guid, tmpGuidArr) == -1) { //not in array
let fd = new FormData();
let f = file;
fd.append('file', f);
pageAct.imageFile.push({ "ori_file_name": f.name, "save_file_name": f.guid, "file": fd.get("file") });
}
}
} }
}); });
uploader[0].dropzone.on("addedfile", file => {
const reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = function (event) {
file.dataUrl = event.target.result;
};
})
uploader[0].dropzone.on("success", file => {
let strHtml = ``;
strHtml += `<li class="d-flex align-items-center py-2 px-3" data-uuid="${file.upload.uuid}">
<div><i class="material-icons">cloud_done</i></div>
<div class="d-flex justify-content-between align-items-center p-2 flex-fill">
<span>${file.upload.filename}</span>
<span>${convertSize(file.upload.total)}</span>
</div>
</li>`;
$(".update_box ul").append(strHtml);
$("#uploadBtnGro").show();
uplFiles.push(file);
uploadBtnGro();
})
uploader[0].dropzone.on("removedfile", file => {
$(`[data-uuid='${file.upload.uuid}']`).remove();
if (uplFiles.findIndex(x => x.upload.uuid == file.upload.uuid) != -1) {
uplFiles.splice(uplFiles.findIndex(x => x.upload.uuid == file.upload.uuid), 1);
}
uploadBtnGro();
})
} }
</script> </script>

View File

@ -491,9 +491,56 @@ class File {
let myMath = new YourTeam.Utility.Math(); let myMath = new YourTeam.Utility.Math();
let myFile = new YourTeam.Utility.File(); let myFile = new YourTeam.Utility.File();
let strExtName = "", strOrgName = ""; let strExtName = "", strOrgName = "";
for (let i = 0; i < files.length; i++) { if (files.length > 0) {
let file = files[i]; for (let i = 0; i < files.length; i++) {
let file = files[i];
if (limitMaxSize != null) {
if (file.size / 1024 < limitMinSize || file.size / 1024 > limitMaxSize) {
limitFun ? limitFun() : "";
return false
}
}
htmlImg = "";
let guid = myMath.guid().replace(' ', '');
file.guid = guid;
if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
let reader = new FileReader();
reader.addEventListener("load", function () {
let image = new Image();
let src = this.result;
image.src = this.result;
image.onload = function () {
strExtName = myFile.getFileExtension(file.name);
strOrgName = (strExtName === null || strExtName === "") ? file.name : file.name.replace('.' + strExtName, '');
htmlImg = frontHtml + '<img data-filename="' + file.name + '" data-orgname="' + strOrgName + '" data-savename="' + guid + '" data-extname="' + strExtName
+ '" data-size="' + file.size + '" width="' + width + '" height="' + height + '" src="' + src + '">'
+ backHtml;
container.insertAdjacentHTML("afterBegin", htmlImg);
//$("[name=" + removeClickTagName + "]").on("click", function (e) {
// e.preventDefault();
// $(this).closest(removeTag).remove();
//});
if (i === files.length - 1 && funDoSomeThing) {
funDoSomeThing();
}
}
});
reader.readAsDataURL(file);
} else {
if (showAlert) {
showAlert("danger", "只支援圖片格式");
}
else {
alert("只支援圖片格式");
}
}
}
}
else {
let file = files;
if (limitMaxSize != null) { if (limitMaxSize != null) {
if (file.size / 1024 < limitMinSize || file.size / 1024 > limitMaxSize) { if (file.size / 1024 < limitMinSize || file.size / 1024 > limitMaxSize) {
limitFun ? limitFun() : ""; limitFun ? limitFun() : "";
@ -504,7 +551,6 @@ class File {
let guid = myMath.guid().replace(' ', ''); let guid = myMath.guid().replace(' ', '');
file.guid = guid; file.guid = guid;
if (/\.(jpe?g|png|gif)$/i.test(file.name)) { if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
let reader = new FileReader(); let reader = new FileReader();
reader.addEventListener("load", function () { reader.addEventListener("load", function () {
let image = new Image(); let image = new Image();
@ -522,21 +568,21 @@ class File {
// e.preventDefault(); // e.preventDefault();
// $(this).closest(removeTag).remove(); // $(this).closest(removeTag).remove();
//}); //});
if (i === files.length - 1 && funDoSomeThing) { if (funDoSomeThing) {
funDoSomeThing(); funDoSomeThing();
} }
} }
}); });
reader.readAsDataURL(file); reader.readAsDataURL(file);
} else { } else {
if (showAlert) { if (showAlert) {
showAlert("danger", "只支援圖片格式"); showAlert("danger", "只支援圖片格式");
} }
else { else {
alert("只支援圖片格式"); alert("只支援圖片格式");
} }
} }
} }
} }
readAndPreviewFiles(files, containerId, imgWidth = null, imgHeight = null, frontHtml = null, backHtml = null, funDoSomeThing = null) { readAndPreviewFiles(files, containerId, imgWidth = null, imgHeight = null, frontHtml = null, backHtml = null, funDoSomeThing = null) {
@ -547,37 +593,82 @@ class File {
let myMath = new YourTeam.Utility.Math(); let myMath = new YourTeam.Utility.Math();
let myFile = new YourTeam.Utility.File(); let myFile = new YourTeam.Utility.File();
let strExtName = "", strOrgName = "", strSaveName = ""; let strExtName = "", strOrgName = "", strSaveName = "";
for (let i = 0; i < files.length; i++) { if (files.length) {
let file = files[i]; for (let i = 0; i < files.length; i++) {
let file = files[i];
htmlImg = "";
let guid = myMath.guid().replace(' ', '');
file.guid = guid;
//alert(/\.(xls?x|doc?x|ptt?x|pdf|zip|rar|7zip|txt|odt|xml|rtf|ods|odp|pps?x)$/i.test(file.name));
if (/\.(xls?x|doc?x|ptt?x|pdf|zip|rar|7zip|txt|odt|xml|rtf|ods|odp|pps?x)$/i.test(file.name)) {
if (file.size == 0) { //檔案大小為0時不會產生base64需防呆
showAlert("danger", "無法上傳大小為0的檔案");
return false;
}
//先新增a標籤 在套上src 可能解決多檔案上傳時無法讀取到最後上傳檔案的問題
strSaveName = guid;
strExtName = myFile.getFileExtension(file.name);
strOrgName = (strExtName === null || strExtName === "") ? file.name : file.name.replace('.' + strExtName, '');
htmlImg = frontHtml + '<a id="' + strSaveName + '" data-filename="' + file.name + '" data-orgname="' + strOrgName + '" data-savename="' + strSaveName + '" data-extname="' + strExtName
+ '" data-size="' + file.size + '" width="' + width + '" height="' + height + '" download="' + strOrgName + '.' + strExtName + '" target="_blank">' + strOrgName + '.' + strExtName + '</a>'
+ backHtml;
container.insertAdjacentHTML("afterBegin", htmlImg);
let reader = new FileReader();
reader.addEventListener("load", function (event) {
$($(container).find("a")[i]).attr("href", this.result);
if (i === files.length - 1 && funDoSomeThing) {
funDoSomeThing();
}
});
reader.readAsDataURL(file);
} else {
if (showAlert) {
showAlert("danger", "只支援文件格式");
} else {
alert("只支援文件格式");
}
}
}
}
else {
let file = files;
htmlImg = ""; htmlImg = "";
let guid = myMath.guid().replace(' ', '');
file.guid = guid;
//alert(/\.(xls?x|doc?x|ptt?x|pdf|zip|rar|7zip|txt|odt|xml|rtf|ods|odp|pps?x)$/i.test(file.name)); //alert(/\.(xls?x|doc?x|ptt?x|pdf|zip|rar|7zip|txt|odt|xml|rtf|ods|odp|pps?x)$/i.test(file.name));
if (/\.(xls?x|doc?x|ptt?x|pdf|zip|rar|7zip|txt|odt|xml|rtf|ods|odp|pps?x)$/i.test(file.name)) { if (/\.(xls?x|doc?x|ptt?x|pdf|zip|rar|7zip|txt|odt|xml|rtf|ods|odp|pps?x)$/i.test(file.name)) {
if (file.size == 0) { //檔案大小為0時不會產生base64需防呆 if (file.size == 0) { //檔案大小為0時不會產生base64需防呆
showAlert("danger", "無法上傳大小為0的檔案"); showAlert("danger", "無法上傳大小為0的檔案");
return false; return false;
} }
//先新增a標籤 在套上src 可能解決多檔案上傳時無法讀取到最後上傳檔案的問題 //先新增a標籤 在套上src 可能解決多檔案上傳時無法讀取到最後上傳檔案的問題
strSaveName = myMath.guid().replace(' ', ''); strSaveName = guid;
strExtName = myFile.getFileExtension(file.name); strExtName = myFile.getFileExtension(file.name);
strOrgName = (strExtName === null || strExtName === "") ? file.name : file.name.replace('.' + strExtName, ''); strOrgName = (strExtName === null || strExtName === "") ? file.name : file.name.replace('.' + strExtName, '');
htmlImg = frontHtml + '<a id="' + strSaveName +'" data-filename="' + file.name + '" data-orgname="' + strOrgName + '" data-savename="' + strSaveName + '" data-extname="' + strExtName htmlImg = frontHtml + '<a id="' + strSaveName + '" data-filename="' + file.name + '" data-orgname="' + strOrgName + '" data-savename="' + strSaveName + '" data-extname="' + strExtName
+ '" data-size="' + file.size + '" width="' + width + '" height="' + height +'" download="' + strOrgName + '.' + strExtName + '" target="_blank">' + strOrgName + '.' + strExtName + '</a>' + '" data-size="' + file.size + '" width="' + width + '" height="' + height + '" download="' + strOrgName + '.' + strExtName + '" target="_blank">' + strOrgName + '.' + strExtName + '</a>'
+ backHtml; + backHtml;
container.insertAdjacentHTML("afterBegin", htmlImg); container.insertAdjacentHTML("afterBegin", htmlImg);
let reader = new FileReader(); let reader = new FileReader();
reader.addEventListener("load", function (event) { reader.addEventListener("load", function (event) {
$($(container).find("a")[i]).attr("href", this.result); $($(container).find("a")).attr("href", this.result);
if (i === files.length - 1 && funDoSomeThing) { if (funDoSomeThing) {
funDoSomeThing(); funDoSomeThing();
} }
}); });
reader.readAsDataURL(file); reader.readAsDataURL(file);
} else { } else {
if (showAlert) { if (showAlert) {
showAlert("danger", "只支援文件格式"); showAlert("danger", "只支援文件格式");
@ -585,7 +676,7 @@ class File {
alert("只支援文件格式"); alert("只支援文件格式");
} }
} }
} }
} }
async getBase64Image(path, callback) { async getBase64Image(path, callback) {
//生成canvas //生成canvas

View File

@ -1,8 +1,10 @@
using Microsoft.AspNetCore.Http; using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc; using Microsoft.AspNetCore.Mvc;
using NPOI.SS.Formula.Functions;
using Repository.BackendRepository.Interface; using Repository.BackendRepository.Interface;
using Repository.FrontendRepository.Interface; using Repository.FrontendRepository.Interface;
using System; using System;
using System.Collections.Generic;
using System.IdentityModel.Tokens.Jwt; using System.IdentityModel.Tokens.Jwt;
using System.IO; using System.IO;
using System.Net; using System.Net;
@ -76,5 +78,17 @@ namespace FrontendWebApi.ApiControllers
var filePath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "excel", path); var filePath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "excel", path);
return File(System.IO.File.ReadAllBytes(Path.Combine(filePath, fileName)), "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", fileName); return File(System.IO.File.ReadAllBytes(Path.Combine(filePath, fileName)), "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", fileName);
} }
[HttpPost]
[Route("api/Upload")]
public ActionResult DroZonUplFile()
{
var a = HttpContext.Request.Form.Files;
return Json(new
{
code = "0000",
data = HttpContext.Request.Form.Files
});
}
} }
} }