How can I upload files in IE?

Question

I want to upload files to my server using the following html and js:

<script type="text/javascript">
    $(function() {
        $('#uploadimageBtn').click(function() {
                $('#imageInput').click();
        });

        $('#imageInput').change(function(event) {
                $('#loading-spinner').show();
                var file = $(this).val();
                var fileName = file.split("\\");
                $('#uploadimageBtn-inner').html("Uploading..."); 
                $('#uploadForm').submit();
                event.preventDefault();
        });                
    });
</script>

<div id="uploadimageBtn">
    <g:img id="loading-spinner" style="display:none;" file="loading.gif"/>
    <div id="uploadimageBtn-inner">Click to upload a file</div>
</div>  

<g:form name="uploadForm" action="update" method="post" enctype="multipart/form-data">
    <div style="height: 0px;width: 0px; overflow:hidden;">
        <input id="imageInput" name="image" type="file" value="upload"/>
    </div>
</g:form>

It works perfect in all the major browsers but in IE it did not work.

So what do I have to change in order to make it work?

You should look at this answer. I find it to be the best from what I've seen that doesn't use a plugin or anything: http://stackoverflow.com/a/13679816/1264846. You really should do more research and try to fix problems yourself after someone tells you what the problem is. @Magus gave you plenty to go off of. — James Kleeh, Dec 04 '12 at 04:37
@James Kleeh this is very bood, but it does not help me for IE. So can you help me fixing the problem below? I spend many hours and could not figure out what to do. — Michael, Dec 04 '12 at 07:36

score 4 · Answer 1 · answered Dec 03 '12 at 08:48

Internet Explorer has some security on file inputs. You can't trigger a click on a file input. And i think you can't listen to some event on a file input.

You have to use a "trick" with an invisible file input if you want to do such a thing. You put an invisible file input over an img and when the user click on the img, he actually click in the input file. But you can't clone the file input on IE, so you must detach this input from the DOM, put it in a form, and then submit it.

You can check : http://fineuploader.com/ I think it can do what you want to do.

How can I upload files in IE?

1 Answers1