JavaScript Forum

**samv18** · 08-19-2011, 09:12 AM

This is my first post in this forum. I am trying to upload file with single click of a link. It works fine in all the browser except IE. it gives me 'Access Denied' Java Script Error. After searching on internet I found its Security issue which has been added in IE. Can somebody please provide any work around or fix for this problem? THanks in advance.

<ul class="actions">
<li><a id ="uploadLink" class ="list" type="submit" href="#" onclick="document.getElementById('fileUpload').dis abled=false; document.getElementById('fileUpload').click();">Up load Order</a>
</li>
</ul>
<form id="uploadForm" name="uploadOrderForm" action="$sessionForm.getLink('/UploadOrder.do')" method="post" enctype="multipart/form-data">
<input disabled ="true" id ="fileUpload" name="uploadedFile" onchange="this.form.submit();" type="file" style = "position: absolute; width:0px; height :0px; right: 0pt; top: 0pt; opacity: 0;filter: alpha(opacity = 0);">
</input>

</form>

**Marik** · 11:01 PM

Using jQuery:

HTML Code:

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
        
        <script type="text/javascript">
            $(function() {
            
                $('#uploadFile').click(function(e) {
                    $('#fileUploadField').click();
                    e.preventDefault();
                });
            
            });
        </script>
        
        <input type="file" name="something" style="display: none" id="fileUploadField" />
        <a href="" id="uploadFile">Upload File</a>

This works for me in IE7, 8 and 9 (possible 6 too - didn't check).

Update

This doesn't work in the versions of Chrome/Safari for Windows/Opera that I'm using, perhaps due to security restrictions. I remember trying to do this in an earlier project and then it didn't work in ff (whatever version it was at the time). So basically this type of script may not work in all browsers, unless someone could come up with a cross browser trick...

2nd Update

Looked into this a bit more since I am in need of the same functionality, turns out browsers don't allow click events to be invoked on hidden elements. So instead of display: none on the input type file as in the above code use something like:

<input type="file" name="something" style="visibility:hidden; position:absolute" id="fileUploadField" />

Which seems to make it work in webkit browsers like chrome and safari. However it still doesn't work in Opera.

**MCDarkmaster** · 11-21-2011, 05:31 AM

Hello Guys,

I think I've got an equal error. I have a existing image. If I want to change it i won't see the input type file field. Instead I want to click on the Picture itself to change it.
So I coded this:

HTML Code:

<html>
  <body>
    <form id="contact" encType="multipart/form-data" method="post">
      <img id="picture">
      <input id="picture_upload" name="contact[picture]" type="file">
      <input type="submit" value="submit" name="submit" />
    </form>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
    <script type="text/javascript">
       $(function() {
         $('#picture').click(function() {
           $('#picture_upload').click();
         });
       });
     </script>
   </body>
</html>

Ok with jQuery it works fine in Firefox. But in IE9 there is some Click Protection. If I click on the Picture, I can choose a new one, but I can't submit it.

Do you have some workarounds for this?