javascript - Auto-submit an upload form when a file is selected, and trigger an action - Stack Overflow

admin管理员组

文章数量:1379475

I'm trying to submit an uploaded file automatically when the user uploads the file. The shortest way I found was to insert onChange="form.submit()"in the upload files input. Source I did that, and now when I insert an action to the submit input (through JavaScript), it doesn't get triggered.

How can I trigger an event when I do onChange="form.submit()"?

JSFiddle

Code snippet:

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

<script src=".1.1/jquery.min.js"></script>
<form action="">
    <input type="file" id="file" onChange="form.submit()" />
    <input id="submit" type="submit" name="submit" value="Upload"/>
</form>

I'm trying to submit an uploaded file automatically when the user uploads the file. The shortest way I found was to insert onChange="form.submit()"in the upload files input. Source I did that, and now when I insert an action to the submit input (through JavaScript), it doesn't get triggered.

How can I trigger an event when I do onChange="form.submit()"?

JSFiddle

Code snippet:

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

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

Update

I know it's possible to perform that with $('#file').change(function()... But I want to know if it's possible to do it with onChange="form.submit()".

• javascript
• jquery
• html
• forms

Share Improve this question Follow edited May 23, 2017 at 10:29 CommunityBot 111 silver badge asked Nov 11, 2015 at 2:35 JessicaJessica 9,8401616 gold badges7373 silver badges155155 bronze badges 10

• Try changing the name of the submit button – Tomaso Albinoni Commented Nov 11, 2015 at 2:41
• Thanks! I tried tha, and it doesn't work – Jessica Commented Nov 11, 2015 at 2:43
• insert what action? And yes, you should not name your button submit. – epascarello Commented Nov 11, 2015 at 2:46
• Do you want the function to run when a file is uploaded AND when the user clicks the submit button, or only in one of those events? – Tomaso Albinoni Commented Nov 11, 2015 at 2:46
• Only when a file gets uploaded – Jessica Commented Nov 11, 2015 at 2:49

 |  Show 5 more ments

4 Answers 4

Sorted by: Reset to default 5

Solution 1: jsFiddle 1

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

<form action="http://example.">
    <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.">
    <input type="file" id="file" onchange="submitForm()" />
    <input id="submit" type="submit" name="submit" value="Upload"/>
</form>

The <input> tag type file responds for change event when a file is selected by user, so you can do something like this:

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

Checkout the documentation here

Like this:

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

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

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

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

本文标签：