์๋ก ๐ญ
์ ์ ์งํํ๋ ํ๋ก์ ํธ์์ j์ฟผ๋ฆฌ๋ฅผ ์ด์ฉํด ์์ฑํ ์ฝ๋๋ฅผ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๋ฐ๊พธ๋ ๊ณผ์ ์ ์งํํ๊ณ ์๋๋ฐ ์ฝ๊ฐ์ ์ ๋ฅผ ๋จน์๋ ๋์ ์ผ๋ก input file ํ๊ทธ๋ฅผ ์ถ๊ฐํด์ฃผ๋ ์์ !
ํ์ผ ์ถ๊ฐ ๋ฒํผ์ ๋๋ฅด๋ฉด input์ด ์ถ๊ฐ ๋๊ณ ์ถ๊ฐ๋ ์ญ์ ๋ฒํผ์ ๋๋ฅด๋ฉด ํด๋น input์ด ์ญ์ ๋๋ ๊ธฐ๋ฅ์ด๋ค.
input ํ๊ทธ๋ ์ ๋์ด๋๋๋ฐ ์ญ์ ๊ฐ ๋ค์ฃฝ๋ฐ์ฃฝ์ผ๋ก ๋จ, ์ญ์ ๋ ๋๋๋ฐ ํ์ผ ์ ํ์ด ์ ๋จ, ๊ฑ ์ญ์ ๊ฐ ์ ๋จ ๋ฑ ๋ค์ํ๋๋ฐ ์ด์จ๋ ํด๋ด์๋ค ใ
JSP ์ผ๋ถ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <tr> <th class="header"><label for="file" >์ด๋ฏธ์ง ์ฒจ๋ถ</label></th> <td class="contents"> <div id = "main" style="margin-bottom: 11px;">๋ฉ์ธ ์ด๋ฏธ์ง <span> <input type="file" name="mainIamge" style="border: none; width: auto;"> </span> </div> ์์ธ ์ด๋ฏธ์ง <span> <input type="file" id="file" name="file_0" style="border: none; width: auto;"> <a href="#this" class="btn" id="addFileInput">ํ์ผ ์ถ๊ฐ</a> </span> <div id="fileDiv"></div> </td> </tr> | cs |
๋ฉ์ธ์ด๋ฏธ์ง๋ ์ด๋ฏธ์ง ํ ์ฅ๋ง ์ ๋ก๋ ํ ์ ์๋๋ก ๊ตฌํํ๊ธฐ ๋๋ฌธ์ ์์ธ์ด๋ฏธ์ง์๋ง ๊ธฐ๋ฅ์ ์ ์ฉํ๋ค.
input ํ๊ทธ์ name ๊ฐ์ผ๋ก ๊ฐ๊ฐ์ input์ ๊ตฌ๋ถํ๋๋ก ํ๊ณ ๋์ ์ผ๋ก input ํ๊ทธ๊ฐ ์ถ๊ฐ๋ ๊ณณ์ div ํ๊ทธ๋ฅผ ์ด์ฉํด ๊ณต๊ฐ์ ์์ฑํด๋์๋ค.
JavaScript
1. ํ์ผ ์ถ๊ฐ ๋ฒํผ ํด๋ฆญ ์ด๋ฒคํธ
1 2 3 4 5 6 | const addFileBtn = document.getElementById('addFileInput'); addFileBtn.addEventListener('click', function(e){ fn_addFileInput(); }); | cs |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | var count = 1; //file input ์ถ๊ฐ function fn_addFileInput() { let fileDiv = document.getElementById('fileDiv'); let fileName = 'file_' + (count++); //์๋ก ์์ฑ๋๋ file input let newFileInput = document.createElement('input'); newFileInput.type = 'file'; newFileInput.id = 'file'; newFileInput.name = fileName; newFileInput.style = 'border:none; width:auto; padding-left:79px;'; //์๋ก ์์ฑ๋๋ file input ์ญ์ ๋ฒํผ let newDeleteFileInputBtn = document.createElement('button'); newDeleteFileInputBtn.type = 'button'; newDeleteFileInputBtn.id = 'delete-file-input'; newDeleteFileInputBtn.textContent = '์ญ์ '; newDeleteFileInputBtn.dataset.fileName = fileName; let newFileInputWrapper = document.createElement('p'); newFileInputWrapper.appendChild(newFileInput); newFileInputWrapper.appendChild(newDeleteFileInputBtn); //์ถ๊ฐํด์ฃผ๊ธฐ fileDiv.appendChild(newFileInputWrapper); } | cs |
๋ฒํผ์ ๋๋ฅด๋ฉด fn_addFileInput() ํจ์๊ฐ ๋์ํ๋ค.
count๋ผ๋ ์ด๋ฆ์ ์ ์ญ ๋ณ์๋ฅผ ์ ์ธํ๊ณ , ๊ฐ๊ฐ์ input ํ๊ทธ๋ฅผ ๊ตฌ๋ถ ํ ์ ์๋๋ก ์ ์ญ๋ณ์๋ฅผ ์ฌ์ฉํ์ฌ file_1์ ์์์ผ๋ก file_2, file_3 ์ด๋ฐ ์์ผ๋ก name ์์ฑ์ด ๋ถ๊ฒ ํด์ฃผ์๋ค.
input ํ๊ทธ์ input์ ์ญ์ ํ๋ ๋ฒํผ, ๊ทธ๋ฆฌ๊ณ ์ด ๋์ ํฉ์ณ์ค p ํ๊ทธ๋ฅผ createElement๋ฅผ ์ด์ฉํ์ฌ ๋ง๋ค๊ณ ,
appendChild ๋ฉ์๋๋ก input๊ณผ ์ญ์ ๋ฒํผ์ p ํ๊ทธ ์์ ์ถ๊ฐํด์ฃผ์๋ค.
p ํ๊ทธ ์์ ๋ชจ๋ ์์๋ค์ด ๋ด๊ฒผ์ผ๋ div ์์ appendChild๋ก p ํ๊ทธ๋ฅผ ์ถ๊ฐํด์ค๋ค.
์ด๋ ๊ฒํ๋ฉด ํ์ผ ์ถ๊ฐ ๋ฒํผ์ ์ ์ ์๋ํ๋ค!
2. ์ญ์ ๋ฒํผ ๊ตฌํ
์ญ์ ๋ฒํผ์ fn_addFileInput() ํจ์๊ฐ ๋์ํ ์ดํ ์์ฑ๋๋ค. ํ์ผ ์ถ๊ฐ ๋ฒํผ์ ๋๋ฌ์ผ๋ง ์์ฑ๋๋ ๋ฒํผ์ด๋ ๊ฒ์ด๋ค.
๊ทธ๋์ ์ฒ์์ fn_addFileInput() ํจ์ ์์๋ค ์ด๋ฒคํธ๋ฅผ ์์ฑ ํ์๊ณ ๋ฌด์กฐ๊ฑด '์ญ์ ๋ฒํผ ์์ฒด'์ ์ด๋ฒคํธ๋ฅผ ๊ฑธ์ด์ฃผ๋ ค๊ณ ํ๋ค. ๋น์ฐํ๋ค๊ณ ์๊ฐํ๋ค...
๊ทธ๋ฌ๋ค ์ด๋ฒคํธ ์์ ๊ฐ๋ ์ ์๊ฒ ๋์๊ณ ํ์ฉํด๋ณด์๋ค.
1 2 3 4 5 6 7 8 9 | document.getElementById('fileDiv').addEventListener('click' , function(e) { if(e.target.matches('[data-file-name]')) { fn_deleteFileInput(e.target); } }); function fn_deleteFileInput(target) { target.parentElement.remove(); } | cs |
file input๊ณผ ์ญ์ ๋ฒํผ์ด ์ถ๊ฐ ๋ fileDiv ์์ฒด์ ํด๋ฆญ ์ด๋ฒคํธ๋ฅผ ๊ฑธ์ด์คฌ๋ค.
e.target์ ํด๋ฆญ ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ ์์๋ฅผ ๋ปํ๊ณ matches() ๋ฉ์๋๋ฅผ ํตํด data-file-name ์์ฑ์ ๊ฐ์ง๊ณ ์๋์ง ๊ฒ์ฌํ๋ค.
์ญ์ ๋ฒํผ์ ๋์ ์ผ๋ก ๋ง๋๋ ๊ณผ์ ์์ dataset์ ๋ฃ์ด์ค ์ด์ ์ด๋ค!
์กฐ๊ฑด๋ฌธ์ ํต๊ณผํ๋ฉด input ํ๊ทธ๋ฅผ ์ญ์ ํด์ค fn_deleteFileInput() ํจ์๊ฐ ๋์ํ๊ฒ ๋๋ค.
fn_deleteFileInput() ํจ์๊ฐ ๋์ํ๋ ์์๋ ์ญ์ ๋ฒํผ์ด๋ค.
์ญ์ ๋ input ํ๊ทธ๋ ์ญ์ ๋ฒํผ์ ๋ถ๋ชจ ์์์ด๋ฏ๋ก parentElement๋ก ์ญ์ ํด์ฃผ๋ฉด ๋๋ค.
๋ฆฌํฉํฐ๋ง์ ์งํํ๋ฉฐ matches() ๋ฉ์๋๋ ์ฒ์.. ์๊ฒ ๋์๊ณ ์ด๋ฒคํธ ์์์ ์ ์ ์บก์ฒ๋ง/๋ฒ๋ธ๋ง ๊ด๋ จ ์์์ ๋ณด๋ค๊ฐ ์ ํ์ ์ด ์๋๋ฐ ์จ๋จน์ด๋ณด๋ค๋ ๋ฟ๋ฏํ๋ค!
์ฐธ๊ณ
'Dev > JavaScript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
์๋ฐ์คํฌ๋ฆฝํธ ํ๋กํ ํ์ ? (0) | 2023.04.10 |
---|---|
JavaScript ์๋ฐ์คํฌ๋ฆฝํธ ์๊ณ ๋ง๋ค๊ธฐ (1) | 2023.04.09 |
DOM(Document Object Model) ๋ฌธ์ ๊ฐ์ฒด ๋ชจ๋ธ (0) | 2023.04.08 |
์นด์นด์ค๋งต api ์ขํ์ ๋ง์ปค ์ด๋(์์ )ํ๊ธฐ (0) | 2023.03.22 |
๋ค์ ์ฐํธ๋ฒํธ api์ ์นด์นด์ค ๋งต api ์ฌ์ฉ๊ธฐ (0) | 2023.03.07 |
๋๊ธ