隐藏文件类型的文件上传，通过jquery提交表单

Question

I am using iframe for file uploading and is working fine in all browsers except IE. It says access denied on form.submit line. Please check my code below.

$(function(){
        $('.uploadBanner').click(function () {
               $('.uploadFile').trigger('click');
            });
        $(".uploadFile").on('change', function(e){  
            e.preventDefault();            
            document.getElementById('bannerUploadForm').submit();
        });  

    });

where my .uploadBanner is the click event for hidden field and .uploadFile is the hidden file type

let me know on this.

Answer 1

IE doesn't allow manipulation of the type="file" input element from javascript due to security reasons.

You can do a work around for this issue be detecting if the browser is ie open a file upload dialog and let the user to click on it manually

if(jQuery.browser.msie) { 
    $('#hiddenUploadForm').dialog();
}
else {
    $('.uploadFile').click();
}

Answer 2

IE explicitly prohibits you from programmatically opening up the file chooser dialog (by triggering a click event) and then programmatically uploading any of the selected files. The error will occur when you attempt to submit the form in this case. Let the user click the file input element instead and you will be fine. If you need to style the file input element, it's not hard to do this. Simply make it opaque and add make it the child of a div that contains the proper styling. Look around on SO or Google for specifics if needed.