Upload image without submitting form, works on all browsers

Ishank Gupta
If you will have a look at my old post on Uploading files/image with Ajax & Jquery, without submitting a form, you will find that this implementation does not works with Internet Explorer (IE). IE does not supports FormData, so either we can flash or the hidden iframe solution. Now flash is not the best solution as it is not installed in many browsers (and many of the mobile devices does not supports flash). So, the hidden iframe solution is best in our case. Here is how we can implement it :
 <!-- Change the target of the form to the hidden iframe -->
<form id="avatar_form" action="/welcome/upload" method="post" enctype="multipart/form-data" target="uploader_iframe">
<input id="avatar" type="file" name="avatar" size="30" />
</form>

<!-- Hidden iframe which will interact with the server, do not forget to give both name and id values same -->
<iframe id="uploader_iframe" name="uploader_iframe" style="display: none;"></iframe>

<!--...
Read more