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

154

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

javascript html

— 램 1
소스

9

사용자가 잘못된 파일을 선택하면 어떻게됩니까? IMO는 제출시기를 선택하기 위해 사용자에게 맡겨야합니다.

— Tyler Crompton

2

@ 타일러 대부분의 사람들은 올바른 파일을 선택하고 UX 마찰을 줄이기 위해 노력하고 있습니다. 잘못된 파일을 선택한 사람들은 파일을 업로드 한 후 삭제하도록 선택할 수 있습니다.

— ram1

3

"대부분의 사람들"은 현명한 결정을 내리지 만 대부분의 사람들은 그렇지 않습니다.

— Phix

2

@TylerCrompton에 동의합니다. 사용자는 멍청한 실수를 저지르고 귀하를 탓할 것입니다. 제출 후 실행 취소를 추가 할 수 있습니다.

— Ross Keddy

3

가장 좋은 답변은 가장 간단한 답변입니다. stackoverflow.com/a/25893747/1536309

— Blair Anderson

194

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

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

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

— 알렉스 투르 핀
소스

4

jQuery 솔루션이 작동하지 않는 Safari에서 작동합니다. 이상한?

— henrywright

2

@ 헨리 라이트 : 예. jQuery에서 Submit()호출은 jQuery submit이벤트를 트리거 하지만 기본 양식을 시작하지는 않습니다 submit(). $('form')[0].submit()jQuery

— Gone Coding

68

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을 검사하면 바로 동작하는 것을 볼 수 있습니다.

— 슬라 르 티단
소스

48

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>

스 니펫 확장

— 사 미치
소스

또한 같은 질문이 stackoverflow에있었습니다 : stackoverflow.com/questions/4704154/…

— Samich

이 접근 방식은 Safari에서 작동합니까? 잘 모르겠습니다. Chrome, IE 및 FF를 모두 테스트했습니다.

— henrywright

@ErdalG : 작동하는 jQuery 버전이 아래에 추가되었습니다. 이 문제를 피합니다.

— 사라 코딩

31

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>

스 니펫 확장

— Alex.K.
소스

무엇이 잘못되었거나 무엇을 개선해야하는지 명확하게하기 위해 투표를 거부 한 경우 의견을 추가하십시오.

— Alex.K.

9

가장 짧은 해결책은

<input type="file" name="file" onchange="javascript:document.getElementById('form').submit();" />

— 엑스 보즈
소스

2

어때onchange="this.form.submit()"

— vikkee

1

어때요 onchange="form.submit()"? :)

— slartidan

5

<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>

— 두르 바 바랄
소스

4

이미 jQuery를 사용하고 있다면 :

<input type="file" onChange="$(this).closest('form').submit()"/>

— 소틴
소스

4

이것은 사용자가 파일을 선택할 때 내 이미지 업로드 솔루션입니다.

HTML 부분 :

<form enctype="multipart/form-data" id="img_form" method="post">
    <input id="img_input" type="file" name="image" accept="image/*">
</form>

자바 스크립트 :

document.getElementById('img_input').onchange = function () {
upload();
};
function upload() {
    var upload = document.getElementById('img_input');
    var image = upload.files[0];
    $.ajax({
      url:"/foo/bar/uploadPic",
      type: "POST",
      data: new FormData($('#img_form')[0]),
      contentType:false,
      cache: false,
      processData:false,
      success:function (msg) {}
      });
};

— 시기
소스

2

jquery로 다음 코드를 시도하십시오.

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>

<script>
$(document).ready(function(){
    $('#myForm').on('change', "input#MyFile", function (e) {
        e.preventDefault();
        $("#myForm").submit();
    });
});
</script>
<body>
    <div id="content">
        <form id="myForm" action="action.php" method="POST" enctype="multipart/form-data">
            <input type="file" id="MyFile" value="Upload" />
        </form>
    </div>
</body>
</html>

— 라지브 알 마문
소스

이것이 내가 jquery로 제출 이벤트를 잡을 수있게 해주는 유일한 방법이기 때문에 +1입니다. 다른 방법은 제출 이벤트를 무시하는 것처럼 보이므로 양식을 확인하거나 Ajax를 사용하여 제출할 수 없습니다. 감사합니다

— user1404617

1

.NET WebForms를 사용하는 사람들은 전체 페이지 제출을 원하지 않을 수 있습니다. 대신 동일한 onchange아이디어를 사용하여 자바 스크립트가 숨겨진 버튼 (예 : <asp : Button ...)을 클릭하면 숨겨진 버튼으로 나머지 버튼을 사용할 수 있습니다. 확실히 당신은을하고 확인 display: none;버튼을하지 Visible="false".

— 페로 야
소스

1

HTML

<form id="xtarget" action="upload.php">
<input type="file" id="xfilename">
</form>

자바 스크립트 퓨어

<script type="text/javascript">
window.onload = function() {
    document.getElementById("xfilename").onchange = function() {
        document.getElementById("xtarget").submit();
    }
};
</script>

— KingRider
소스

1

<form action="http://example.com">
    <input type="file" onchange="Submit()" />
</form>

 <script>
     // it will submit form 0 or you have to select particular form
     document.getElementsByTagName("form")[0].submit();       
 </script>

— 아난 트 다비
소스

0

이 코드를 넣어 한 줄의 코드로 코드를 작동시킬 수 있습니다

<input type="file" onchange="javascript:this.form.submit()">

제출 버튼을 클릭하지 않고 서버에 파일을 업로드합니다.

— 쿠마르 아 미트
소스