input type=“file” .submit() not working IE8

Question

been driving me insane this has. Works with everything, except... IE8 :( File selection appears (non-images are not filtered out IE8, but that's another issue), but when you select the image the upload script is not fired, nothing gets uploaded.

The $("body").addClass("loading"); is fired (this is the loading modal), so I have no idea when the image-upload.php is not run.

Thanks folks :)

Javascript:

var wrapper = $('<div/>').css({height:0,width:0,'overflow':'hidden'});
var fileInput = $('#file').wrap(wrapper);

$('.chooseFile').click(function(){
 fileInput.click();
}).show();

$(document).ready(function() {
 fileInput.change(function () 
  { 
   $("body").addClass("loading");
   //uploadImg.submit();
   $('#uploadImg').submit();
   this.blur();
   this.focus();
  });
});

HTML

<form name="uploadImg" id="uploadImg" action="image-upload.php" method="post" enctype="multipart/form-data" class="btnFile">
 <div class="chooseFile">Choose File</div>
 <input type="file" id="file" name="file" value="Select File to Upload" accept="image/*">
</form>

Answer 1

You need to use

var wrapper = $('<div/>').css({height:0,width:0,'overflow':'hidden'});
var fileInput = $('#file').wrap(wrapper);
$('.chooseFile').click(function(){
 fileInput.click();
}).show();

inside

$(document).ready(function() {