yona#37 파일 업로드 클라이언트, 서버단 사전 검증으로 적용
This commit is contained in:
@@ -62,7 +62,7 @@
|
||||
</div>
|
||||
|
||||
<div class="list-dot">
|
||||
<p>첨부파일은 10MB 이내로 등록해 주세요.</p>
|
||||
<p th:text="'첨부파일은 ' + ${@portalProperties.file.maxSize} + ' 이내로 등록해 주세요.'">첨부파일은 8MB 이내로 등록해 주세요.</p>
|
||||
<p>문서파일과 이미지 파일만 등록 가능합니다. (pdf, doc, docx, xls, xlsx, ppt, pptx, hwp, gif, jpg,
|
||||
png)</p>
|
||||
</div>
|
||||
@@ -123,11 +123,8 @@
|
||||
const file = fileInput.files[0];
|
||||
|
||||
if (file) {
|
||||
const allowedExtensions = ['.pdf', '.doc', '.docx', '.xls', '.xlsx', '.ppt', '.pptx', '.hwp', '.gif', '.jpg', '.jpeg', '.png'];
|
||||
const fileExt = '.' + file.name.split('.').pop().toLowerCase();
|
||||
|
||||
if (!allowedExtensions.includes(fileExt)) {
|
||||
customPopups.showAlert("허용된 파일 형식이 아닙니다.\n문서파일(pdf, doc, docx, xls, xlsx, ppt, pptx, hwp)과 이미지 파일(gif, jpg, png)만 등록 가능합니다.");
|
||||
// FileValidator를 사용한 파일 검증
|
||||
if (!FileValidator.validateFile(file)) {
|
||||
fileInput.value = '';
|
||||
fileNameInput.value = '';
|
||||
fileNameInput.classList.remove('i_trash', 'after');
|
||||
|
||||
@@ -61,7 +61,7 @@
|
||||
</div>
|
||||
|
||||
<div class="list-dot">
|
||||
<p>첨부파일은 10MB 이내로 등록해 주세요.</p>
|
||||
<p th:text="'첨부파일은 ' + ${@portalProperties.file.maxSize} + ' 이내로 등록해 주세요.'">첨부파일은 8MB 이내로 등록해 주세요.</p>
|
||||
<p>문서파일과 이미지 파일만 등록 가능합니다. (pdf, doc, docx, xls, xlsx, ppt, pptx, hwp, gif, jpg,
|
||||
png)</p>
|
||||
</div>
|
||||
@@ -127,32 +127,15 @@
|
||||
const fileInput = document.getElementById('file');
|
||||
const fileNameInput = document.querySelector('.upload-name');
|
||||
|
||||
const allowFileExtention = ['pdf','doc','docx','xls','xlsx','ppt','pptx','hwp','gif','jpg','png'];
|
||||
|
||||
function isValidFileExtention(filename) {
|
||||
const extention = filename.split('.').pop().toLowerCase();
|
||||
return allowFileExtention.includes(extention);
|
||||
}
|
||||
|
||||
function isValidFileSize(filesize) {
|
||||
const maxSize = 10 * 1024 * 1024;
|
||||
return filesize <= maxSize;
|
||||
|
||||
}
|
||||
|
||||
fileInput.addEventListener('change', function () {
|
||||
|
||||
const file = fileInput.files[0];
|
||||
if (file) {
|
||||
if(!isValidFileExtention(file.name)) {
|
||||
const errorMsg = '허용된 파일 형식이 아닙니다. <br>문서파일과 이미지 파일만 등록 가능합니다. <br> (pdf, doc, docx, xls, xlsx, ppt, pptx, hwp, gif, jpg, png)';
|
||||
const formattedMsg = errorMsg.replace(/\n/g,'<br>');
|
||||
$('#customAlertMessage').html(formattedMsg);
|
||||
$('#customAlert').css('display','flex');
|
||||
return;
|
||||
}
|
||||
if(!isValidFileSize(file.size)) {
|
||||
customPopups.showAlert('첨부파일은 10MB 이내로 등록해 주세요.')
|
||||
// FileValidator를 사용한 파일 검증
|
||||
if (!FileValidator.validateFile(file)) {
|
||||
fileInput.value = '';
|
||||
fileNameInput.value = '첨부파일을 등록 해 주세요';
|
||||
fileNameInput.classList.remove('i_trash', 'after');
|
||||
fileNameInput.classList.add('before');
|
||||
return;
|
||||
}
|
||||
fileNameInput.value = file.name;
|
||||
|
||||
@@ -265,7 +265,7 @@
|
||||
<span th:errors="*{compRegFile}"></span>
|
||||
</div>
|
||||
<div class="list-dot">
|
||||
<p>첨부파일은 10MB 이내로 등록해 주세요.</p>
|
||||
<p th:text="'첨부파일은 ' + ${@portalProperties.file.maxSize} + ' 이내로 등록해 주세요.'">첨부파일은 8MB 이내로 등록해 주세요.</p>
|
||||
<p>문서파일과 이미지 파일만 등록 가능합니다. (pdf, doc, docx, xls, xlsx, ppt, pptx, hwp, gif, jpg, png)</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -354,28 +354,18 @@
|
||||
fileInput.addEventListener('change', function() {
|
||||
const files = fileInput.files;
|
||||
if (files.length > 0) {
|
||||
let totalSize = 0;
|
||||
let fileNames = [];
|
||||
const allowedExtensions = ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'hwp', 'gif', 'jpg', 'png'];
|
||||
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
const file = files[i];
|
||||
totalSize += file.size;
|
||||
const fileExtension = file.name.split('.').pop().toLowerCase();
|
||||
|
||||
if (!allowedExtensions.includes(fileExtension)) {
|
||||
customPopups.showAlert(`'${file.name}'은(는) 허용되지 않는 파일 형식입니다.`);
|
||||
fileInput.value = '';
|
||||
return;
|
||||
}
|
||||
|
||||
fileNames.push(file.name);
|
||||
// FileValidator를 사용한 파일 검증
|
||||
if (!FileValidator.validateFiles(files)) {
|
||||
fileInput.value = '';
|
||||
fileNameInput.value = '';
|
||||
fileNameInput.classList.remove('i_trash', 'after');
|
||||
fileNameInput.classList.add('before');
|
||||
return;
|
||||
}
|
||||
|
||||
if (totalSize > 10 * 1024 * 1024) { // 10MB
|
||||
customPopups.showAlert('총 파일 크기는 10MB를 초과할 수 없습니다.');
|
||||
fileInput.value = '';
|
||||
return;
|
||||
let fileNames = [];
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
fileNames.push(files[i].name);
|
||||
}
|
||||
|
||||
fileNameInput.value = fileNames.join(', ');
|
||||
|
||||
Reference in New Issue
Block a user