#input-file #jQuery #이미지,문서만등록가능 #10메가미만파일만등록가능
백앤드에서 다시 잡히긴 하지만 프론트에서 미리 걸러지면 사용자가 편할 것 같습니다.
이미지, 문서 필터링은 validTypes 변수에 들어 있는데 가끔 문서파일 인데도 안잡히는 경우가 있기는 합니다ㅠ
아직 테스트하며 추가중인데 왠만한건 다 추가 되어있습니다.
HTML
<form action="">
<div class="frm-ipt-box frm-file-ipt-box">
<div class="frm-ipt-line">
<h3 class="ipt-tit frm-required">
파일첨부
</h3>
<div class="ipt-smallbox">
<input id="frm-file-ipt" type="file" placeholder="등록 된 첨부파일이 없습니다." name='bf_file[0]'>
</div>
</div>
<div class="file-bottom-txt">
<p>- 10MBYTE 미만 파일만 업로드하세요.</p>
<p>- 이미지, 문서 파일만 가능합니다.</p>
</div>
</div>
<div class="submit-box">
<button type='submit' class='frm-submitbtn'>등록</button>
</div>
</form>
CSS
body{
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
min-height: 600px;
}
form{
max-width: 1200px;
width: 100%;
margin: 0 auto;
padding: 50px 30px;
border: 1px solid #f1f1f1;
}
.frm-ipt-box .frm-ipt-line{
display: flex;
align-items: center;
gap: 12px;
}
.frm-ipt-box .ipt-tit{
width: 120px;
}
.frm-ipt-box .ipt-tit > span{
font-size: 20px;
font-weight: normal;
letter-spacing: -0.8px;
color: rgb(0, 0, 0);
position: relative;
}
.frm-required::after{
content: "";
display: block;
width: 6px;
height: 6px;
background-color: rgb(230, 0, 18);
border-radius: 100%;
position: absolute;
top: 0;
right: -5px;
}
.frm-ipt-box .ipt-smallbox{
width: calc(100% - 132px);
}
.n-ipt{
width: 100%;
background-color: rgb(248, 248, 248);
outline: none;
border: none;
padding: 23px 37px;
font-size: 20px;
font-weight: normal;
letter-spacing: -0.8px;
text-align: left;
color: rgb(0, 0, 0);
}
#frm-file-ipt{
position: relative;
cursor: pointer;
width: 615px;
height: 70px;
line-height: 70px;
padding-left: 38px;
padding-right: 250px;
background-color: rgb(248, 248, 248);
}
#frm-file-ipt::after{
content: "";
display: block;
width: 15px;
height: 100%;
position: absolute;
top: 0;
right: 220px;
background: #fff;
}
#frm-file-ipt::-webkit-file-upload-button{
position: absolute;
right: 0;
width: 220px;
height: 71px;
background-color: rgb(85, 85, 85);;
color: #fff;
border: 0;
margin: 0;
cursor: pointer;
font-size: 20px;
font-weight: normal;
letter-spacing: -0.8px;
color: rgb(255, 255, 255);
}
.frm-ipt-box .file-bottom-txt{
margin-top: 16px;
}
.frm-ipt-box .file-bottom-txt p{
font-size: 17px;
font-weight: 300;
line-height: 1.59;
letter-spacing: -0.68px;
color: rgb(0, 0, 0);
}
.submit-box button{
display: block;
width: 300px;
font-size: 24px;
font-weight: bold;
border: 1px solid #ccc;
text-align: center;
border-radius: 5px;
padding: 12px 0;
margin: 0 auto;
margin-top: 50px;
}
jQuery
<script>
$(document).ready(function() {
$('#frm-file-ipt').on('change', function() {
var fileInput = document.getElementById('frm-file-ipt');
var file = fileInput.files[0];
if (file) {
if (file.size > 10485760) {
alert("10MB 미만 파일만 가능합니다!");
fileInput.value = '';
return;
}
var validTypes = [
// Image formats
'image/jpeg', 'image/png', 'image/gif',
// PDF format
'application/pdf',
// Microsoft Word formats
'application/msword', // .doc
'application/vnd.openxmlformats-officedocument.wordprocessingml.document', // .docx
// Microsoft Excel formats
'application/vnd.ms-excel', // .xls
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', // .xlsx
// Microsoft PowerPoint formats
'application/vnd.ms-powerpoint', // .ppt
'application/vnd.openxmlformats-officedocument.presentationml.presentation', // .pptx
// Hancom Office formats
'application/x-hwp', // .hwp
'application/vnd.hancom.hwp', // .hwp (alternative MIME)
'application/haansofthwp', // .hwp (alternative MIME)
'application/haansofthwpx', // .hwpx
// OpenDocument formats
'application/vnd.oasis.opendocument.text', // .odt
'application/vnd.oasis.opendocument.spreadsheet', // .ods
'application/vnd.oasis.opendocument.presentation', // .odp
// Rich Text Format
'application/rtf', // .rtf
// Plain text format
'text/plain', // .txt
// Other document formats
'application/vnd.google-apps.document', // Google Docs
'application/vnd.google-apps.spreadsheet', // Google Sheets
'application/vnd.google-apps.presentation', // Google Slides
'application/vnd.apple.pages', // Apple Pages
'application/vnd.apple.numbers', // Apple Numbers
'application/vnd.apple.keynote', // Apple Keynote
'application/epub+zip', // .epub (eBook format)
'application/x-mobipocket-ebook', // .mobi (eBook format)
'application/x-fictionbook+xml', // .fb2 (eBook format)
'application/wordperfect', // .wpd (WordPerfect)
'application/x-latex', // .latex (LaTeX documents)
'application/postscript' // .ps (PostScript)
];
if (!validTypes.includes(file.type)) {
alert("이미지, 문서 파일만 가능합니다!");
fileInput.value = '';
return;
}
}
});
})
</script>
댓글