选择文件后自动提交上传表单，并触发操作

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>