Jquery file upload not working in IE
I've made a simple plugin for uploading images using a hidden iframe. Essentially it replaces the file dialog with a link, clicking that link fires the file dialog and after selecting the file uploads it automatically.
This works great in Chrome, Safari and Firefox. Unfortunately all IE versions, including 9, refuse to submit the file. The file dialog shows up just fine and if I alert the value it shows the selected file but the submit event apparently won't fire. If I select the file with the actual file dialog then it works as expected, even sends the file without hitting a submit button or anything.
Included is just the relevant code for doing things, obviously there's the code for the jQuery plugin thingies etc.
var self = this;
var randId = Math.floor(Math.random()*1001);
var iframeHTML = '<iframe id="iframe'+randId+'" name="iframe'+randId+'" style="visibility:hidden;height:1px;width:1px;"></iframe>';
var formHTML = '<form method="post" enctype="multipart/form-data" encoding="multipart/form-data" action="'+settings开发者_开发知识库.action+'" target="iframe'+randId+'" id="form'+randId+'" >';
var inputHTML = '<input type="file" name="upload" id="input'+randId+'"><input type="submit" id="submit'+randId+'" value="Submit" />';
$(this).append(iframeHTML+formHTML+inputHTML+'</form>');
$('input#input'+randId).change(function() {
if($(this).val() != '') {
if(settings.spinner != '') {
$(settings.spinner).show('fade');
}
}
$('form#form'+randId).submit();
});
$(settings.activator).click(function(e) {
e.preventDefault();
$('input#input'+randId).trigger('click');
});
settings.activator is the link used to open the file dialog.
Do I need some IE specific thing for this to work? I know this should be possible because other scripts do it, but I'm not too keen to utilize them because for my needs most of them are way too massive and feature packed. I also don't want to use any Flash based solutions.
EDIT: For the time being I solved the issue by just showing the file input box in IE and having proper browsers do as above. I would still like to hear if there are actual solutions aside from the "opacity hidden input box on top of the link" hack for IE.
I recall seeing IE7 ignoring form submits that target hidden iframes. Try moving the iframe out of the view instead of actually hiding it:
.iframe_hidden {
width: 0;
height: 0;
position: relative;
left: -9999px;
}
精彩评论