選擇文件后自動提交上傳表單，並觸發操作

Question

我正在嘗試在用戶上傳文件時自動提交上傳的文件。 我發現的最短方法是在上載文件input插入onChange="form.submit()" 。 資料來源是我這樣做的，現在，當我向submit input （通過JavaScript）插入操作時，它不會被觸發。

當我執行onChange="form.submit()"時如何觸發事件？

JSFiddle

程式碼片段：

 $("form").on('submit',function(){ alert("It works"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="http://example.com"> <input type="file" id="file" onChange="form.submit()" /> <input id="submit" type="submit" name="submit" value="Upload"/> </form> 

更新資料

我知道可以使用$('#file').change(function()...來執行該操作，但是我想知道是否可以使用onChange="form.submit()"來執行該操作。

Answer 1

解決方案1：jsFiddle 1

 $(document).ready(function(){ $("form").on('submit',function(){ alert("It works"); }); }); 

 <form action="http://example.com"> <input type="file" id="file" onchange="$('form').submit();" /> <input id="submit" type="submit" name="submit" value="Upload"/> </form> 

解決方案2：jsFiddle 2

 $(document).ready(function(){ $("form").on('submit',function(){ alert("It works"); }); }); function submitForm() { $('form').submit(); } 

 <form action="http://example.com"> <input type="file" id="file" onchange="submitForm()" /> <input id="submit" type="submit" name="submit" value="Upload"/> </form> 

Answer 2

當用戶選擇文件時， <input>標記類型file響應change事件，因此您可以執行以下操作：

input.onchange = function (event) {
  // do something
}

在此處查閱文檔

Answer 3

像這樣：

 $('#file').on('change', function() { alert('test'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="http://example.com"> <input type="file" id="file" /> <input id="submit" type="submit" name="submit" value="Upload"/> </form> 

Answer 4

$('#file').change(function() {
    alert("Form is being submitted");
    $('#myBeautifulForm').submit();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myBeautifulForm" action="http://example.com">
    <input type="file" id="file" />
    <input id="submit" type="submit" name="submit" value="Upload"/>
</form>