파일을 선택할 때 업로드 양식을 자동 제출하려면 어떻게합니까? 양식이 있습니다. 파일을 선택할 때 자동으로 제출하려면

간단한 파일 업로드 양식이 있습니다. 파일을 선택할 때 자동으로 제출하려면 어떻게합니까? 사용자가 제출 버튼을 클릭하지 않기를 바랍니다.

답변

파일 입력시 단순히 폼의 submit메소드 를 호출 할 수 있습니다 onchange.

document.getElementById("file").onchange = function() {
    document.getElementById("form").submit();
};

http://jsfiddle.net/cwvc4/73/

답변

file변경 사항에 대해 자동으로 양식을 제출 하도록 -input에 지시하십시오.

<form action="http://example.com">
    <input type="file" onchange="form.submit()" />
</form>
스 니펫 확장

이 솔루션은 다음과 같이 작동합니다.

  • onchange입력 요소 value가 수정 될 때마다 다음 스크립트를 실행합니다.
  • form 이 입력 요소는
  • submit() 에 지정된대로 양식이 모든 데이터를 URL로 보내도록합니다. action

이 솔루션의 장점 :

  • ids 없이 작동합니다 . 하나의 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>
스 니펫 확장

jQuery
.change()와 .submit(): 

$('#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()"/>