간단한 파일 업로드 양식이 있습니다. 파일을 선택할 때 자동으로 제출하려면 어떻게합니까? 사용자가 제출 버튼을 클릭하지 않기를 바랍니다.
답변
파일 입력시 단순히 폼의 submit
메소드 를 호출 할 수 있습니다 onchange
.
document.getElementById("file").onchange = function() {
document.getElementById("form").submit();
};
답변
file
변경 사항에 대해 자동으로 양식을 제출 하도록 -input에 지시하십시오.
<form action="http://example.com">
<input type="file" onchange="form.submit()" />
</form>
이 솔루션은 다음과 같이 작동합니다.
onchange
입력 요소value
가 수정 될 때마다 다음 스크립트를 실행합니다.form
이 입력 요소는submit()
에 지정된대로 양식이 모든 데이터를 URL로 보내도록합니다.action
이 솔루션의 장점 :
id
s 없이 작동합니다 . 하나의 html 페이지에 여러 양식 이 있으면 더 편리 합니다.- 기본 자바 스크립트, jQuery 또는 이와 유사한 필요 없음
- 코드는 html 태그 안에 있습니다. html을 검사하면 바로 동작하는 것을 볼 수 있습니다.
답변
jQuery 사용하기 :
$('#file').change(function() {
$('#target').submit();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="target" action="destination.html">
<input type="file" id="file" value="Go" />
</form>
답변
onchange
이벤트가있는 JavaScript :
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="filename" onchange="javascript:this.form.submit();">
</form>
$('#fileInput').change(function() {
$('#myForm').submit();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<form action="upload.php" id="myForm">
<input type="file" id="fileInput">
</form>
답변
가장 짧은 해결책은
<input type="file" name="file" onchange="javascript:document.getElementById('form').submit();" />
답변
<form id="thisForm" enctype='multipart/form-data'>
<input type="file" name="file" id="file">
</form>
<script>
$(document).on('ready', function(){
$('#file').on('change', function(){
$('#thisForm').submit();
});
});
</script>
답변
이미 jQuery를 사용하고 있다면 :
<input type="file" onChange="$(this).closest('form').submit()"/>