Setting Form EncType Dynamically To Multipart/Form-Data In IE (Internet Explorer)
Posted June 27, 2008 at 10:07 AM
A while back, I posted an AJAX-Style file upload demo. While using that technique in a current project, I discovered a bit of a bug. In FireFox, you can dynamically set the EncType of a form element to be "multipart/form-data" for file uploads; however, this does not work in Internet Explorer (IE). Apparently in IE, you have to set the "encoding" of the form rather than the "enctype". The good news is, you can set both values without concern and this will take care of the problem:
Launch code in new window » Download code as text file »
- // Using jQuery, set both the enctype and the encoding
- // attributes to be multipart/form-data.
- $( "form#upload-form" )
- .attr( "enctype", "multipart/form-data" )
- .attr( "encoding", "multipart/form-data" )
- ;
Minor note, but wanted to write this down to help me remember.
Download Code Snippet ZIP File
Post Comment | Ask Ben | Other Searches | Print Page
Newer Post
Ask Ben: Streaming Binary Data From The Database (BLOB) To The User Using ColdFusion
Older Post
Tracking Delta-Only Data Audits In ColdFusion Using XML
Reader Comments
Does firefox also work with "encoding" rather than just "enctype"? Would save you an extra line :).
@Gareth,
I actually didn't even check that.
The angel in me would prefer to stay with "enctype" as that is what the name of the attribute actually is and therefore what the real "intent" of the attr() function is meant to be.... but if all browsers worked with "encoding", the devil in my might not care ;)
Thanks Ben for documenting this behavior of IE. I was breaking my head for quite sometime to find out why my AJAX file upload is not working in IE.
Regards
Sudar
@Sudar,
Glad to help! Yeah, it was really frustrating coming up against this for the first time.
in opera and firefox also work whit "encoding". Thanks for the tip!
thanks for the tip. this has saved me hours of recoding!
Thank you very much.
Ahh, I really wish this was higher up in Google when search terms are something like "ie dynamically create upload form" or "ie upload form bug", woulda saved me a lot of time. Thanks for documenting this.
@Anon,
Well, I'm glad you made it here eventually, even if a little delayed :)
Thanks, helped one I had the inspiration to google it!
Thanks, now working...
@Mon, @yoyok,
Awesome fellas. Glad to help.
Thanks for the useful post, save me lots of time.
The right-and-strict implementation should be:
$('form#upload-form').attr((this.encoding ? 'encoding' : 'enctype') , 'multipart/form-data');
Cheers!
@Emanuele,
Good point, that is probably technically more accurate as it only applies attributes when necessary.
