1

I want to achieve gmail like upload functionality which is upload on click/event, which works well on all browsers. For IE8 and below gmail is using Flash to upload file, but for IE9 + they are using single click upload without Flash. On click of div gmail is calling browse popup and on select of image or file in browse popup, submit gets triggered programmatically.

I have working sample of my code, which works well in Chrome, Firefox and IE 10 + browsers, but it does not work in IE9. I am not looking for IE8 solution as that can be managed with Flash.

I am aware that because of security reasons IE restricts programmatic form submit on File input. I have seen many solutions for upload at single click in which browse button is hidden and overlapped on another anchor and on click of that anchor, browse gets open and upload is done but that is not what I am looking for. I want to do it programmatically.

My Question is how gmail achieve this in IE9 which works, but my code does not work. Can anybody help me in achieving same functionality which works well in IE9.

Here is jsFiddle output:

http://jsfiddle.net/vikramkute/nnJ8q/show/

For FireFox, Chrome and IE10+

For IE9

  • Step1: Select a file from drop down browse popup gets open.
  • Step2: Select Image or any file.
  • Output: You will not get redirected (That means form submit dose not get called.)

Here is jsFiddle code: http://jsfiddle.net/vikramkute/nnJ8q

Try gmail upload in IE9. It works.

Here is my code:

$(function() {
    $("#files").on("change", function(){
        var selected = $(this).val();
        $('input[type=file]').trigger('click');
    })

    $('input[type=file]').on("change", function(){
        $("#uploadForm").trigger('submit');
    })
});

HTML: 

<select id="files">
    <option value="blank">(blank)</option>
    <option value="file1">File1</option>
    <option value="file2">File2</option>
    <option value="file3">File3</option>
    <option value="file4">File4</option>
</select>
<form id="uploadForm" action="upload_file.php" method="post" enctype="multipart/form-data">
  <input type="file" name="file" id="file" style="visibility:hidden;" >
  <input type="submit" value="Submit" id="uploadSubmit" style="visibility:hidden;"/>
</form>
TechFreak
  • 408
  • 4
  • 13
  • 1
    Read this question and its answers: http://stackoverflow.com/q/210643/1091949 I strongly recommend using a plugin for cross-browser ajax uploading, as there are many browser-specific pitfalls. I suggest https://github.com/LPology/Simple-Ajax-Uploader (I'm the author). – user1091949 Jul 30 '14 at 19:23
  • Thank you very much for your feedback. Your plugin(Simple-Ajax-Uploader) is good for uploading Images. I am looking for uploading any file like PDF, jpg and ZIPs, just like gmail do. Please let me know if you can create something like this which works on IE9. – TechFreak Jul 31 '14 at 11:26
  • The plugin actually works for any type of file. The example just happens to use images. I personally use it to allow people to upload all kinds of files. – user1091949 Jul 31 '14 at 19:05
  • Hello user1091949, Can you highlight what is it in this plugin which makes it work in below IE9 browsers? I went through plugin code but unable to find it. :( – TechFreak Aug 01 '14 at 10:02

0 Answers0