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

Question

我试图在用户上传文件时自动提交上传的文件。我发现的最短方法是在上传文件input中插入onChange="form.submit()"。 Source我这样做了，现在当我向 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

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

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