Jquery on select file , submit form

Question

I have this html code

    <form method="post" id="upload_video" enctype="multipart/form-data" action="/Home/Save">        
            <div id="form_box">
                    <input type="text" name="name" id="name" value="" style="color: rgb(0, 0, 0);"><br>
                    <input type="text" name="email" id="email" value="" style="color: rgb(0, 0, 0);"><br>
                    <input type="text" name="mobile" id="mobile" value="Κινητό" style="color: rgb(0, 0, 0);"><br>
                    <input type="checkbox" id="checkbox">
            </div>
            <input type="file" name="file" id="upload_file" style="position:absolute;top:-100px;">
    </form>

    <div id="upload"></div>

and i want by clicking the #upload div then to automaticallu=y select file, and when i do it then submit my form. So i have this script

            $('#upload').click(function () {
                    $('#upload_file').click();
            });

            $("#upload_file").change(function () {
                $('#upload_video').submit();
            });

The $('#upload_file').click() event works great in all browsers but the $('#upload_file').change() works only in FF and Chrome but not in IE. So my form is submitted only in FF and Chrome..

Any ideas?

[This answer](http://stackoverflow.com/a/2389373/825789) indicates it may be an issue with older versions of jquery. Which version are you using? Also, the [highest ranked answer to the same question](http://stackoverflow.com/a/2876677/825789) seems to provide a workaround. — bfavaretto, Feb 07 '12 at 14:02
Possible duplicate check the link http://stackoverflow.com/questions/1637503/jquery-change-event-on-select-not-firing-in-ie — Ravi Vanapalli, Feb 07 '12 at 14:03

score 1 · Accepted Answer · edited May 23 '17 at 12:11

1

From this post: jQuery change method on input type="file"

it looks like you may have to do this:

$("#upload_file").live( 'change', function () {
                $('#upload_video').submit();
            });

edited May 23 '17 at 12:11

Community

1
1

answered Feb 07 '12 at 14:25

Kory Hodgson

790
1
5
15

score 0 · Answer 2 · edited Sep 17 '21 at 07:00

I'm not sure why Kory Hodgson's answer is marked as the answer since this will not work in chrome or newer versions of IE. This is a security risk since files could be upload without the user's consent.

For those trying to do this, you have a large number of options. There are some very inexpensive options for uploading multiple files (uploadify or plupload are two I have used.) If you only need to upload one file, then you could use an iframe to upload the image (google upload file using iframe, there are tons of examples.) In the iframe, you will want to call a javascript function on the "onload" event. After the image is uploaded, you can return some json to the iframe window that provides the status of the upload (success/fail.) Depending on what you are trying to accomplish, you could either pass your data back through the json or you could pass the redirect page url in the json.

score 0 · Answer 3 · answered Feb 13 '12 at 14:36

0

Just found that this is not possible in IE due to security reasons

answered Feb 13 '12 at 14:36

mathew

185
4
20

Jquery on select file , submit form

3 Answers3