Jquery-ui-fileinput - Submitting file input using jQuery works in all except Internet Explorer, is there a workaround?

27th of August 2012 0

Submitting file input using jQuery works in all except Internet Explorer, is there a workaround?

Hi all,

I am using jQuery to submit a form containing only 1 file input and a submit button to an iFrame.

My setup:

I have a custom button that launches the file browse window:

The (hidden) file input:

The trigger:

$ (‘input#buttonId’).click(function(){
$ (‘input#fileId’).click();

Clicking the top button does everything I want it to do: it launches the file browse window.
After picking a file, the value of the file input is changed accordingly, showing the path to the file I picked. So far so good I thought, as it works in all browsers (including ie6+).

Now comes the actual submitting of the form, which occurs on a change event bound to the file input:

$ (‘input#fileId’).change(function(){
$ (‘form#formId’).submit();

In all non-IE browsers, the form including the actual file are properly submitted, but IE’s behavior doesn’t make sense to me:

The file input’s value is emptied, but nothing else happens.

The form itself:

Even without using the target attribute on the form, the submit call does nothing less than emptying the file inputs value in IE (not even a page refresh is invoked).

Clicking the file input directly though, instead of using the custom button, results in the desired action:
after picking a file the form is correctly submitted.

Could it be possible that even though the correct file browse is called, an input file click triggered by jQuery doesn’t actually add the file itself, but only the path to the file?

I’m at a loss here some any help is greatly appreciated!
Thank you ‘just “JR”‘ for posting an answer without even reading the question…useless

Best answer:

Answer by just “JR”
JQuery does NOT upload a file to the server, unless you have a server-side script that receives the file. (ie php, asp)
Here is a fileupload function using php. work with ANY browser…

The type FILE will show an input field and a “browse” button.
Clicking the browse button will allow the user to select a file to
Clicking the submit will submit the form to this same file.

Your “upfiles.php”:

$ res = “Could not move “.$ fname['tmp_name'].” to “.$ uploadfile.”
$ res = “File “.$ fname['name'].” failed to upload.”;
return ($ res);


Finally: you must create a directory where to put the uploaded files, and that
directory MUST have permissions set to 0777… (here called “uploadedfiles”)
(This set of functions works, but is NOT secure against viruses or “injection”:
the prevention of these is a much more complicated matter!)

Add your own answer in the comments!

Share it!

Was it good for you to?


Support for the site!

No sponsors at the moment.

Your opinion matters. Add it below.

Tip: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Recent comments


Copyright jqueryui.info since 2010. All rights reserved. Design and the Absolute Theme by Tommie Hansen.