Wednesday, June 12, 2013

SCRIPT5 Access denied on form submit in IE if file is triggered

SCRIPT5 access denied is a problem when you want to trigger a input[type='file'] element on internet explorer(ie). Most of the browsers like mozilla, opera working by just triggering click on the file input field. But internet explorer(ie) does not like this and think this it as violation of access. So we just can put the file inside a div and make the input area whole around as div area. So when one click on the div, actually it clicks on the input element and open file selection dialog. And ie is now happy with it.
See the full result in jsFiddle.

jsFiddle view


Html and css

<div class="file_upload_section">
    <span>Click to upload</span>
    <input type="file" name="upload_file" />
</div>

<style type="text/css">
    div.file_upload_section {
        position: relative;
        background-color: yellow;
        padding: 20px
        font-weight: bold
        overflow: hidden;
    }
    
    div.file_upload_section input[type=file] {
        position: absolute;
        right: 0px;
        top: 0px;
        font-size: 2000px;
        height: 100%;
        opacity: 0;
        z-index: 1000;
        width: 100%;
    }
</style>

Additional jQuery code


$("div.file_upload_section").click(function() {
    var file = $(this).find("input[name='upload_file']");
    file.change(function() {
        var fileName = "Uploading: " + $(this).val().split("\\").pop();
        file.closest("div.file_upload_section").find("span").html(fileName);
    });
});

No comments:

Post a Comment