si-blog

Image preview script

Posted Jan 14, 2005 in JavaScript.

I want to write an image upload script that allows a JavaScript preview of the image before the upload takes place. I've never played around with file uploading before, so I wrote a little test script to see how an image preview might work:

<script type="text/javascript">
function setImage(string) {
    document.getElementById('prevImage').src = 'File:\/\/' + string;
}
</script>
<form>
<input type="file" name="myImage" onchange="setImage(this.value);" />
</form>
<img id="prevImage" />

It works just fine in Internet Explorer, but it fails on other browsers I have checked. I did a little bit of Googling, and I discovered that JavaScript isn't supposed to be able to access the local file system. It appears to be another one of those times when IE helpfully gets it wrong.

Is there a way to make this work without resorting to server-side scripting?

Comments

  1. Gravatar

    Like you said, Javascript isn't supposed to be able to access the client's filesystem (security hole). You can always count on IE to implement the wrong thing right... I think the only way to accomplish this preview, without server-size scripting, would probably be some sort of Active X control... in which case you're treading into muddy water in terms of standards / cross-browser compatibility...

    Posted by Alex Katechis on Jan 13, 2005.

  2. Gravatar

    I suppose the only way left open to me is to have the user submit a form to get an image preview.

    Posted by Simon Jessey on Jan 14, 2005.

  3. Gravatar

    You have it wrong, because you have to add there complete address. That means + file://localhost/ . But it will still work just in Opera and IE, because in Gecko its not possible to call onchange with input type file. So this will works in all (offline, about online I am not quiet sure)
    <script type="text/javascript">
    function setImage() {
    xxx='file://localhost/' + document.getElementById('file').value
    var img=document.createElement('img');
    img.setAttribute('src',xxx);
    document.getElementById('prevImage').appendChild(img)
    }
    </script>
    <input type="file" id="file" />
    <input type="button" value="preview" onclick="setImage();" />
    <div id="prevImage"></div>

    Posted by Fred on Jan 14, 2005.

  4. Gravatar

    Because it is working online as far as I tested it now, you should add two lines for safety reason. Final code is like this one (not works in Opera online) This will works in IE and Gecko based browsers
    <script type="text/javascript">
    function setImage() {
    xxx='file://localhost/' + document.getElementById('file').value;
    xxx=xxx.toLowerCase();
    if (xxx.substring(0,xxx.lastIndexOf('.png'))||xxx.substring(0,xxx.lastIndexOf('.jpg'))||xxx.substring(0,xxx.lastIndexOf('.jpeg'))||xxx.substring(0,xxx.lastIndexOf('.gif'))){
    var img=document.createElement('img');
    img.setAttribute('src',xxx);
    document.getElementById('prevImage').appendChild(img);
    }}
    </script>
    <input type="file" id="file" />
    <input type="button" value="preview" onclick="setImage();" />
    <div id="prevImage"></div>

    Posted by Fred on Jan 14, 2005.

  5. Gravatar

    I can only get your scripts to work in IE, Fred. I think I'm just unlucky!

    Posted by Simon Jessey on Jan 14, 2005.

  6. Gravatar

    OK on my system it works (in Firebird 0.7,Firefox 1.0,Opera 8.0. K-meleon 0.7, Mozilla 1.6, Maxthon and so on) but it could be different on other OS. I am not sure now about Linux and Mac because there is probably another address of images on localhost. So to persuade to work this in all, this : file://localhost/ has to be replaced for each OS with apropriate string. It is written on start of address in address line when you open for example image in Mozilla on win it is this adddress on my destktop file:///C:/Documents%20and%20Settings/Administrator.ALBERT/Plocha/mail.png
    in Opera with this file://localhost/....... Sorry for my English. Am I right, that you use differerent OS than win or not ?

    Posted by Fred on Jan 15, 2005.

  7. Gravatar

    I'm using Windows XP Professional, Fred. But any script I use will need to work on all operating systems and browsers. I'll probably have to go the submit-to-preview route.

    Posted by Simon Jessey on Jan 15, 2005.

  8. Gravatar

    ??? Normaly working http://xy.wz.cz/setimg.php Win xp pro xhtml1.1 + application/xhtml+xml

    Posted by Fred on Jan 16, 2005.

  9. Gravatar

    Sorry, Fred. It is not working for me on Firefox 1.0/Windows XP Professional.

    Posted by Simon Jessey on Jan 16, 2005.

  10. Gravatar

    On my Firefox 1.0 xp pro it is working. There is a possibility in Preferences-webpages- allow javascript-advanced-change pictures ?? Have you this allowed ??

    Posted by Fred on Jan 17, 2005.

  11. Gravatar

    I do have that checked. Thank you for your help, Fred. I'll do it another way.

    Posted by Simon Jessey on Jan 17, 2005.

  12. Gravatar

    I had been trying this for awhile and your script helped me figure out where I was going wrong with it. I've tested it in Firefox 1.0 and IE and it's worked, so that's good enough. I just put a disclaimer saying "Preview may not appear on certain browsers."

    Anyway.. thanks.

    Posted by Colin on Feb 02, 2005.