File button does not upload the image through ajaxForm after styling it

Question

Here is the scenario..

I have a file upload button which is used for uploading images through ajax and preview the image in the browser. It also shows a loading bar when uploading happens.

Now, I have given some styling to the file button using jQuery.

When user selects the image, it gets uploaded to the server and then a preview of image is shown.

Now, this is working fine on all browsers (Chrome, firefox, safari, opera and even maxthon). except Internet explorer (10, 9, 8...all!)

In IE, when I click the customized upload button, it opens the window to upload a file, now when I select the image, it keeps on showing the loading bar and nothing happens.

But the irony is that when I remove the customization from the file upload button, it uploads the image comfortably and shows the preview.

The jQuery code I am using to style the file button is this:

$('#up_btn').on('click', function () {
   $('#photoimg').trigger('click');
});

//Here, up_btn is the ids of the div which I am using as file
button which triggers the file button #photoimg.

and I am using ajaxForm to achieve the ajax upload and preview.

Before asking the question, I have tried almost all tricks to customize the file upload button but the problem remains same, that is, after customizing the file button, the upload never happens.

The code below is the one which performs upload to the server:

 $('#photoimg').live('change', function(){ 
       $("#preview").html('');
       $("#preview").html('<img class="loader_img" src="../images/loader.gif" alt="Uploading...."/>');
       $('#up_btn').hide();
   $("#imageform").ajaxForm({
            target: '#preview'
        }).submit();
   $('#preview').show();
   });
// Here, #photoimg is the id of file upload button, #preview is the div in which the
   preview is being shown, and #up_btn is the customized button for file button.

I also tried hit and try method and found out that the IE is not able to trigger the ajaxForm.

I know that there is some issues between ajaxForm and IE but it is working fine when using simple file button.

Answer 1

IE does not allow the file upload control trigger operation like you did. Instead of you can do like as below.Set File Upload control opacity to 0.

<div style="position:relative;display:inline-block;left:-4px;bottom:-6px;width:16px;  height: 24px;overflow:hidden;">
<img src="/images/attach.jpg" alt="" title="Add Attachment" style="height:24px;width:16px; position: relative;top: 1px; left: 0px;"/>
<input type="file" id="fileupload" name="upload" onchange="getFileName();" style=" opacity: 0;font-size: 50px;width:16px; filter:alpha(opacity: 0);  position: relative; top: -22px; left: -1px" />
</div>

For further reference, please see this. In JavaScript can I make a "click" event fire programmatically for a file input element?

Demo: http://jsfiddle.net/k6zBQ/2/