jQuery를 사용하여 파일 업로드 시 선택된 파일 이름을 표시하려면 <input type="file"> 요소의 change 이벤트를 활용하면 됩니다. 아래는 간단한 예제 코드입니다.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File Upload</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<form>
<label for="fileInput">Choose a file:</label>
<input type="file" id="fileInput">
<p>Selected file: <span id="fileName">None</span></p>
</form>
<script>
// jQuery script to display selected file name
$(document).ready(function() {
$('#fileInput').on('change', function() {
const fileName = $(this).val().split('\\').pop(); // Get file name
$('#fileName').text(fileName || 'None'); // Display file name or 'None' if no file
});
});
</script>
</body>
</html>
동작 설명
- HTML 구조
- <input type="file" id="fileInput">: 사용자가 파일을 선택할 수 있는 파일 입력 필드입니다.
- <span id="fileName">: 선택된 파일 이름이 표시될 영역입니다.
- jQuery 코드
- $('#fileInput').on('change', ...): 파일 선택 필드에서 값이 변경될 때(파일 선택 시) 실행됩니다.
- $(this).val().split('\\').pop(): 파일 경로에서 파일 이름만 추출합니다. 브라우저마다 경로 형식이 다를 수 있으므로 split('\\')를 사용해 경로를 분리한 뒤 마지막 값을 가져옵니다.
- $('#fileName').text(...): 선택된 파일 이름을 해당 HTML 요소에 표시합니다.
결과
- 파일을 선택하면 Selected file: 뒤에 파일 이름이 표시됩니다.
- 파일을 선택하지 않으면 기본값인 None이 유지됩니다.
이 방식은 간단하고 jQuery를 통해 동작을 쉽게 추가할 수 있어 사용자 친화적인 파일 업로드 인터페이스를 구현할 수 있습니다.
#jquery #change #file #split #pop #text #val #event
반응형
'프로그램' 카테고리의 다른 글
| jquery join()에 대한 설명과 예제 (0) | 2024.12.09 |
|---|---|
| jquery 연관된 필드 자동 업데이트 (0) | 2024.12.07 |
| jquery 다중 선택 박스 값 출력 (0) | 2024.12.03 |
| jquery 텍스트 필드 값 변경 시 유효성 검사 (0) | 2024.12.01 |
| jquery 라디오 버튼으로 입력 폼 변경 (0) | 2024.11.29 |
댓글