IE7 displaying local images RRS feed

  • Question

  • Hi everyone,


    I am in the process of creating an image upload form, and I need to display a preview of the image to the user before it gets uploaded.  I did not anticipate this to be any problem, and it wasn't until I tried using it with IE7.  It is not working.  I know that there must be some sort of security setting (this is a ridiuclous setting, by the way) that doesnt allow for this.


    Where can I find this setting so I can instruct my users how to fix it to allow the image to be previewable??  They will need to have this capability and there is no way around this.


    With an image upload form, the user chooses the image themself.  So why on earth am I not able to display it back to them?  They chose it!!  This is the most ridiculous security precaution I have came across yet.  I can understand not letting javascript have access to the file system, don't get me wrong here.  But why in the heck can't I take the value of a file upload control (that is read-only) and put it as the SRC of an image?  Absolutely ridiculous!!


    Any thoughts on the subject matter will be greatly appreciated, and I thank you in advance.



    Tuesday, April 3, 2007 7:40 PM


  • Unless anybody has a better solution, the only way I could get this to work was to have the user add this site to their trusted sites list:


    Tools | Internet Options | Security Tab

      Click trusted sites green checkmark and click the "Sites" button and choose Add to add the site currently being viewed.



    What an unfortunate workaround

    Tuesday, April 3, 2007 8:05 PM

All replies

  • Unless anybody has a better solution, the only way I could get this to work was to have the user add this site to their trusted sites list:


    Tools | Internet Options | Security Tab

      Click trusted sites green checkmark and click the "Sites" button and choose Add to add the site currently being viewed.



    What an unfortunate workaround

    Tuesday, April 3, 2007 8:05 PM
  • I m having the same problem that images does not show when i run the application.

    I have tried by adding localhost to trusted sites and also in Local intranet trusted sites but it does not work plz help me out


    Wednesday, May 9, 2007 1:31 PM
  • if ie7 and firefox lost the feature , then we can drop the preview funcion.

    Tuesday, October 9, 2007 9:58 AM
  • Yes, you're absolutely right. This is the stupidest thing ever. I can't preview my work because ie7 won't display local images. This is retarded. There's no clear way to resolve this in the settings. Very frustrating!

    Saturday, November 24, 2007 5:00 AM
  • I agree this is a dumb security feature.  I can find no easy workaround.  It's apparently a cross-site security deal, but I cannot be 100% sure.  I don't like having to ask the user to add the site to their trusted list... so I'll keep looking for a workaround.


    The only thing I can think of is to actually submit the image that was browsed to.  Upon submitting, capture only the image... and not the rest of the form data.  (using ajax or an iframe as the form target)  Save the image to a temp location on the web server.  Then you can use the temp url as the src attribute value to the image just saved on the server... and that way, you can get around the cross-site security issue.


    Of course, this means that you'd need to submit the form twice (once for the preview, and once for the form data).  I have not yet written any code for this... sorry.


    Because of this security feature change, I'm considering just stripping-out the preview feature on my webpage.  The user can see the image after the form has been submitted, and make corrections if needed.


    Saturday, February 16, 2008 11:39 PM
  • Hi,

     Is it possible for you to post the code that helps you to preview the image ?

     Also, kindly list down what are all the technologies you are using, say, for example, VBScript, HTML, etc...

    Monday, February 18, 2008 11:18 AM
  • I have this in a 1000 millisecond setTimeout

    var str = document.getElementById("filUpload").value.toLowerCase();
    if(str.indexOf(".jpg") > 0)      

    document.getElementById("imgPreview").src = "file:///"+str;
    document.getElementById("imgPreview").src = "/images/imgPreview.gif";

     where the input

    input name="filUpload" type="file" id="filUpload" size="50"


    you might adjust where it checks for .jpg only

    Friday, February 29, 2008 7:13 PM
  •  Hey,

    I know its been a very long time since the last post (almost a year...) but, there is a solution to this problem.

    I agree whilst the "trusted site" zone work around does the trick, its not practical to ask users to change their security settings, and its very unlikely that the ever would.

    As an interesting quirk by the way, just to show how silly this security restriction is, if you were to download an email attachment that was an image, created by another computer (so when you right clicked its properties in windows you would see the "Security: This file came from another computer and might be blocked to help protect this computer" under the file attributes check boxes), then as long as you don't 'Unblock' that file, it will show up in IE7 as a preview of a local image!!!

    However, i digress...

    Use the AlphaImageLoder DirectX CSS filter that was introduced around IE6 and can also be used to achieve transparent PNG's in IE6.

    <!-- This DIV is the target container for the filter, the image will be the DIV background.  -->       
    <div id="oDiv" style="position:relative;  width:80px; height:60px;
                    src='file:///C:/Path/To/Image.jpg', sizingMethod='scale');">

    Naturally, you need to change the 'src' attribute but you can also set this style tag with javascript, so it should be possible to get the file path from the "file" input box and set the div.style.filter CSS from there.

    Personally, i add and delete the preview div tag as a child element of a container div using the DOM.

    Thanks to Microsofts deviation from the specification of the javascript 'Image' object i am able to get the fileSize attribute as well (seperate from solving this problem). This means i'm now able to provide a preview image to the user, test the dimensions of the image (to calculate the memory required by my php image resizing script) and check the file size of the chosen image (to make sure it will upload and is under the server file size limit) all before the user uploads their image.

    Alas, none of this works in Mozzilla browsers like FireFox and Opera, in those browsers the image preview is not shown and the user is left to 'upload and hope for the best' when it comes to filesize/server memory useage.

    For a true x-browser solution, you have to be looking at using Flash 10 (and no earlier) and FLEX to create a file uploader, as from these versions onwards, access to the local file system is now allowed (using the fileReference object). I'd guess that you can do this with Adobe AIR as well but i haven't looked into that.

    Other than that, you could always write your own ActiveX control (i did make one to read file headers to ensure that only the supported image types were being uploaded and not any old file renamed as say .jpg) but i don't have a security certificate to sign the code with, and who is going to install an unsigned activeX control :-)

    Hope this helps,


    • Proposed as answer by arkwenser Wednesday, January 7, 2009 11:39 PM
    Wednesday, January 7, 2009 11:39 PM