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 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 seems to provide a workaround. — bfavaretto
– bfavaretto, Commented Feb 7, 2012 at 14:02
Possible duplicate check the link stackoverflow.com/questions/1637503/… — Ravi Vanapalli
– Ravi Vanapalli, Commented Feb 7, 2012 at 14:03

Community · Accepted Answer · 2017-05-23 12:11:23Z

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(); });

mathew · Accepted Answer · 2012-02-13 14:36:18Z

0

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

answered Feb 13, 2012 at 14:36

mathew

1854 silver badges20 bronze badges

Comments

Nimantha · Accepted Answer · 2021-09-17 07:00:54Z

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.

Collectives™ on Stack Overflow

Jquery on select file , submit form

3 Answers 3

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Linked

Related