반응형
HTML파일 선택 이벤트
우리에게 이런 코드가 있다고 치자.
<form action='' method='POST' enctype='multipart/form-data'>
<input type='file' name='userFile'><br>
<input type='submit' name='upload_btn' value='upload'>
</form>
결과는 다음과 같습니다.
사용자가 '찾아보기...' 버튼을 클릭하면 파일 검색 대화 상자가 열립니다.
파일을 두 번 클릭하거나 '열기' 버튼을 클릭하여 파일을 선택합니다.
파일 선택 후 알림 받을 수 있는 자바스크립트 이벤트가 있나요?
변경 이벤트를 들어봅니다.
document.getElementById('input').addEventListener('change', function(e) {
if (e.target.files[0]) {
document.body.append('You selected ' + e.target.files[0].name);
}
});<input type="file" id="input">파일을 다시 로드해야 할 때 입력 값을 지울 수 있습니다.다음 번에 파일을 추가할 때 '변경 시' 이벤트가 트리거됩니다.
document.getElementById('my_input').value = null;
// ^ that just erase the file path but do the trick
jQuery way:
$('input[name=myInputName]').change(function(ev) {
// your code
});
순수한 JS로 한 방법입니다.
var files = document.getElementById('filePoster');
var submit = document.getElementById('submitFiles');
var warning = document.getElementById('warning');
files.addEventListener("change", function () {
if (files.files.length > 10) {
submit.disabled = true;
warning.classList += "warn"
return;
}
warning.classList -= "warn";
submit.disabled = false;
});#warning {
text-align: center;
transition: 1s all;
}
#warning.warn {
color: red;
transform: scale(1.5);
}<section id="shortcode-5" class="shortcode-5 pb-50">
<p id="warning">Please do not upload more than 10 images at once.</p>
<form class="imagePoster" enctype="multipart/form-data" action="/gallery/imagePoster" method="post">
<div class="input-group">
<input id="filePoster" type="file" class="form-control" name="photo" required="required" multiple="multiple" />
<button id="submitFiles" class="btn btn-primary" type="submit" name="button">Submit</button>
</div>
</form>
</section>취소를 클릭해도 Change 이벤트가 호출됩니다.
오래된 질문이긴 하지만 여전히 유효한 질문입니다.
예상 동작:
- 업로드 후 선택한 파일명을 표시합니다.
- 사용자가 클릭할 경우 아무 작업도 수행하지 않음
Cancel. - 사용자가 동일한 파일을 선택한 경우에도 파일 이름을 표시합니다.
데모가 포함된 코드:
<!DOCTYPE html>
<html>
<head>
<title>File upload event</title>
</head>
<body>
<form action="" method="POST" enctype="multipart/form-data">
<input type="file" name="userFile" id="userFile"><br>
<input type="submit" name="upload_btn" value="upload">
</form>
<script type="text/javascript">
document.getElementById("userFile").onchange = function(e) {
alert(this.value);
this.value = null;
}
</script>
</body>
</html>설명:
- 그
onchange이벤트 핸들러는 파일 선택 이벤트의 변경 사항을 처리하는 데 사용됩니다. - 그
onchange이벤트는 요소의 값이 변경된 경우에만 트리거됩니다.그래서 우리가 같은 파일을 선택할때inputfield 이벤트가 트리거되지 않습니다.이를 극복하기 위해 저는this.value = null;종반에onchange이벤트 함수.선택한 파일의 파일 경로를 다음과 같이 설정합니다.null. 그래서.onchange이벤트는 동일한 파일 선택 시에도 트리거됩니다.
언급URL : https://stackoverflow.com/questions/3528359/html-input-type-file-file-selection-event
반응형
'programing' 카테고리의 다른 글
| jQuery에서 사용하는 방법 :not and hasClass()에서 클래스 없이 특정 요소를 가져오는 방법 (0) | 2023.10.08 |
|---|---|
| 속성에 따라 개체 배열을 별도의 배열로 분할 (0) | 2023.10.08 |
| mysql 대신 Xampp가 MariaDB에 연결됨(KNP/SymfonyCasts 튜토리얼 "데이터베이스 말하는 법") (0) | 2023.10.08 |
| xpath를 사용하여 노드의 N번째 자식 가져오기 (0) | 2023.10.08 |
| jQuery - DIV로 커서 따라가기 (0) | 2023.10.08 |