#1
  1. Wonder of the world
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Location
    the Netherlands
    Posts
    22
    Rep Power
    0

    Question Reading the contents of a input file object with javascript


    I'm trying to make a preview of a browsed picture for my users.
    So far I've come up with this.
    I can't figure out how to read the value of the input file object


    <input type="file" name="Picture" OnChange="javascript:Sync_Picture(this)">
    <script>
    function Sync_Picture()
    {
    // alert(this.value) // for debugging purposes
    document.PreviewPicture.src = this.values
    }
    </script>
    <br><img src="" name="PreviewPicture">
    Last edited by Tim_Lensen; July 12th, 2003 at 09:22 AM.
  2. #2
  3. Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2003
    Posts
    804
    Rep Power
    101
    This should work in versions of NN after 4.7 (not including v 4.7) or in IE... I'm not sure if it will work in older versions of IE.
    Code:
    <html>
    <body>
    <script>
    function Sync_Picture(obj) {
      document.getElementById("PicturePreview").innerHTML = "<img src='" + obj.value + "'>";
    };
    </script>
    
    <form>
    <input type="file" name="Picture" OnChange="javascript:Sync_Picture(this)">
    </form>
    <span id="PicturePreview"></span>
    </body>
    </html>
  4. #3
  5. Wonder of the world
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Location
    the Netherlands
    Posts
    22
    Rep Power
    0
    Thanks you really helped me out
  6. #4
  7. Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2003
    Posts
    804
    Rep Power
    101
    No problem. Probably if you used a picture like you were doing, it would not have changed size to fit the user's picture so I used a span instead and change the innerHTML.

IMN logo majestic logo threadwatch logo seochat tools logo