Question

我尝试在用户上传文件时自动提交上传的文件。我找到的最短路径是在上传文件onChange="form.submit()"中插入input。 Source我做到了，现在当我向submit input（通过JavaScript）插入操作时，它不会被触发。

当我onChange="form.submit()"时，如何触发事件？

JSFiddle

代码段：

＆＃13;

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

＆＃13;

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

＆＃13;

更新

我知道可以使用$('#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>

Answer 2

<input>标记类型file会在用户选择文件时响应change事件，因此您可以执行以下操作：

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

结帐documentation here

Answer 3

像这样：

＆＃13;

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

＆＃13;

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

＆＃13;

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>

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

JSFiddle

4 个答案: