form 파일 부분 삭제하는 기능

CSS 24.11.07

HTML의 form 요소에 file 필드를 사용하여 사용자가 로컬 장치에서 파일을 선택하고 업로드할 수 있습니다.

이 필드를 통해 사용자는 이미지, 문서, 비디오 등 다양한 파일을 서버로 전송할 수 있으며, 웹 애플리케이션에서 파일을 저장, 분석 또는 표시하는 등의 작업이 가능합니다.

데이터 관리 효율성 향상

불필요한 파일을 삭제하여 서버의 저장 공간을 절약하고 데이터 정리가 용이해집니다.

사용자 제어 및 보안 강화

사용자가 파일을 직접 삭제할 수 있어 개인정보 보호와 데이터 관리에 대한 신뢰가 향상됩니다.

시스템 성능 최적화

서버에 불필요한 파일이 줄어들어 저장 및 백업 속도가 개선되고, 시스템 성능 유지와 비용 절감에도 도움이 됩니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const fileInput = document.getElementById('file');
const fileNameContainer = document.getElementById('file-name');
 
fileInput.addEventListener('change', () => {
[...fileInput.files].forEach(file => {
    const fileItem = document.createElement('div');
    fileItem.className = 'file-item';
    fileItem.innerHTML = `
    <span>${file.name}</span>
    <button><span class="material-symbols-outlined">close</span></button>
    `;
 
    // 삭제 버튼 클릭 시 해당 파일 아이템 삭제
    fileItem.querySelector('button').onclick = () => fileItem.remove();
    fileNameContainer.appendChild(fileItem);
});
 
// 동일한 파일을 다시 선택할 수 있도록 초기화
fileInput.value = '';
});
Colored by Color Scripter
cs

[예제]

See the Pen 파일 업로드 후 파일 부분 삭제하는 기능 추가 by designkits (@designkits) on CodePen.

목록으로

최근 포스트

Design Kits Blog