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.
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