Using jS to display an image from file

Discussion in 'Javascript' started by Tim Streater, May 21, 2008.

  1. Tim Streater

    Tim Streater Guest

    The following test page is intended to allow the user to choose an image
    file, and then display it. It works as expected in Safari 3.1.1, FF
    2.0.0.14 (Mac), and IE7 (XP).

    But, it fails in FF 2.0.0.14 (Win-XP) - the image doesn't appear. The
    error console shows no errors and Page Info, under the media tab, shows
    no loaded image (in contrast to FF Mac which shows the image).

    The images I select are all jpegs, btw.

    Any pointers would be appreciated - thanks.



    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/REC-html40/strict.dtd">

    <html>
    <head>
    <title>Image with a Javascript preview.</title>
    <script type="text/javascript">


    function preview()
    {
    var filename = document.form1.filesent.value;
    var Img = new Image ();
    Img.src = filename;
    document.images[0].src = Img.src;
    alert ("Filename: '" + filename + "' width: " + Img.width + "
    height: " + Img.height);
    }

    </script>
    </head>

    <body>
    <h3>File Upload - v020</h3>
    <form name='form1'>
    <input type=file name=filesent>
    <input type=button value="Preview" name="Preview" onClick="preview()">
    </form>
    <p>Image follows</p>
    <img name="image1">
    </body>
    </html>
    Tim Streater, May 21, 2008
    #1
    1. Advertising

  2. Tim Streater escribió:
    > var filename = document.form1.filesent.value;
    > var Img = new Image ();
    > Img.src = filename;


    A string like "C:\Picture.jpg" is not a valid URI. Try adding a
    "file://" prefix and maybe escaping file name characters that need so.



    --
    -- http://alvaro.es - Álvaro G. Vicario - Burgos, Spain
    -- Mi sitio sobre programación web: http://bits.demogracia.com
    -- Mi web de humor al baño María: http://www.demogracia.com
    --
    Álvaro G. Vicario, May 21, 2008
    #2
    1. Advertising

  3. Tim Streater

    VK Guest

    On May 21, 8:28 pm, Tim Streater <> wrote:
    > The following test page is intended to allow the user to choose an image
    > file, and then display it. It works as expected in Safari 3.1.1, FF
    > 2.0.0.14 (Mac), and IE7 (XP).
    >
    > But, it fails in FF 2.0.0.14 (Win-XP) - the image doesn't appear. The
    > error console shows no errors and Page Info, under the media tab, shows
    > no loaded image (in contrast to FF Mac which shows the image).
    >
    > The images I select are all jpegs, btw.
    >
    > Any pointers would be appreciated - thanks.
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > "http://www.w3.org/TR/REC-html40/strict.dtd">
    >
    > <html>
    > <head>
    > <title>Image with a Javascript preview.</title>
    > <script type="text/javascript">
    >
    > function preview()
    > {
    > var filename = document.form1.filesent.value;
    > var Img = new Image ();
    > Img.src = filename;
    > document.images[0].src = Img.src;
    > alert ("Filename: '" + filename + "' width: " + Img.width + "
    > height: " + Img.height);
    > }
    >
    > </script>
    > </head>
    >
    > <body>
    > <h3>File Upload - v020</h3>
    > <form name='form1'>
    > <input type=file name=filesent>
    > <input type=button value="Preview" name="Preview" onClick="preview()">
    > </form>
    > <p>Image follows</p>
    > <img name="image1">
    > </body>
    > </html>


    Within the standard security settings you are not allowed to read the
    current input-file content, only the file name itself, without path.

    IE and some other browsers are having a bit relaxed policy so they let
    you to read the full path iff the current page is loaded from a local
    drive. FF doesn't make such relaxation in neither case: this is why
    the difference you see.

    For a page loaded from the Web all browsers are acting in the same way
    (file name only, no path) and sometimes even that is prohibited.

    In any case no one browser will not let you to access the local file
    system in the latter case, so even if you set the path manuially like
    myImg.src = "file:///C:/image.gif" if will not work.

    So the starting idea was nice but it didn't account the necessarily
    imposed security restrictions.

    For the preview if you still want to implement it, you have to submit
    the image first to the server and having server bouncing the image to
    the form's target (i)frame.
    VK, May 21, 2008
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?UWluZG9uZyBaaGFuZw==?=

    display image after the image downloaded

    =?Utf-8?B?UWluZG9uZyBaaGFuZw==?=, Mar 2, 2004, in forum: ASP .Net
    Replies:
    0
    Views:
    330
    =?Utf-8?B?UWluZG9uZyBaaGFuZw==?=
    Mar 2, 2004
  2. Replies:
    1
    Views:
    1,259
    Metalore
    Oct 18, 2006
  3. Replies:
    1
    Views:
    219
  4. Replies:
    1
    Views:
    146
    Jeff Cochran
    Jul 14, 2006
  5. Mark Szlazak
    Replies:
    3
    Views:
    175
    Fletch
    Apr 25, 2006
Loading...

Share This Page