SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2006
    Location
    California
    Posts
    105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Multiple Image Upload with Thumbnail Previews

    I've seen a couple examples online that do this using one file input element, but none that show you a preview / thumbnail of the image as each one is uploaded. Anyone know how this might be done or have some code to share that can do this? Do the images need to be uploaded to the server before a thumbnail can be displayed? And, can this be done without the page reloading?

  2. #2
    SitePoint Addict jtrelfa's Avatar
    Join Date
    Oct 2004
    Location
    Troy, Mi
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One trick I've used is to have an <img> located near the file upload form element. Then I trigger a javascript function after the user has found a file:
    Code:
    function fileChanged(formValue) {
      document.getElementById("imageElement").src = "file:///" + encodeURI(formValue);
    }

  3. #3
    SitePoint Zealot
    Join Date
    Jun 2006
    Location
    California
    Posts
    105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd love to see the rest of the code you have.

  4. #4
    SitePoint Wizard
    Join Date
    Oct 2005
    Posts
    1,849
    Mentioned
    5 Post(s)
    Tagged
    1 Thread(s)
    This is a nice feature. Do you make the image a thumbnail by setting the width and height in the javascript?

    I'm working on a gallery script. One thing I'm going to attempt is to allow drap and drop reordering of pictures in the users gallery.

    http://tool-man.org/examples/sorting.html

    The above link has Javascript to sort <li> elements via drag and drop. I imagine that it could be adapted to work with <img> elements. So that's what I'm going to try to do.

    After the user reorders the elements one can easily get the order by iterating through the elements (or so I've read ).

  5. #5
    SitePoint Addict jtrelfa's Avatar
    Join Date
    Oct 2004
    Location
    Troy, Mi
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by forumposters View Post
    I'd love to see the rest of the code you have.
    This is by no means complete - it's just an example of a way you could implement something like this:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Testing</title>
    <script type="text/javascript">
    function fileChanged(val) {
      //assume the value is not an image
      var isImage = false;
      var msg = "", path = "";
      var validImages = ["jpg","gif","png","bmp"];
      for (var i = 0, ilength = validImages.length; i < ilength; ++i) {
        if (val.indexOf("." + validImages[i]) !== -1) { 
          isImage = true;
          break; 
        }
      }
      if (isImage) {
        path = "file:///" + encodeURI(val);
        msg = val.substr((val.lastIndexOf("\\") + 1));
      } else {
        path = "";
        msg = "Not a valid image";
      }
      document.getElementById("img").src = path;
      document.getElementById("info").innerHTML = msg;
    }
    window.onload = function() {
      document.getElementById("image").onchange = function() { fileChanged(this.value); };
    };
    </script>
    </head>
    <body>
    <form action="" method="get">
    <p><input type="file" id="image" name="image"></p>
    <p><img src="" id="img" height="150" alt=""><br>
      <span id="info"></span>
    </p>
    </form>
    </body>
    </html>
    Notice I only specified a height attribute for the img - the width will auto-fill with the proper dimensions. You can mess with the code to check for the existing image size, etc to make your thumbnails, too.

  6. #6
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Unfortunately that won't work outside of the "local machine" security zone, as there is no way to determine the file path (the .value property only contains the file name).

  7. #7
    SitePoint Zealot
    Join Date
    Jun 2006
    Location
    California
    Posts
    105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perhaps this effect could be achieved with a combination of Javascript and server side code that uploads the file and displays a thumbnail of it in another frame? What do you think about that? Anyone know of a working example of something like that?

  8. #8
    SitePoint Addict jtrelfa's Avatar
    Join Date
    Oct 2004
    Location
    Troy, Mi
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jimfraser View Post
    Unfortunately that won't work outside of the "local machine" security zone, as there is no way to determine the file path (the .value property only contains the file name).
    When you use a "file" input type, the value in the text box is the full path - at least in IE and Firefox on Windows XP. Did you try it?

    The whole idea is that you technically *are* in the local machine security zone. The point of the script is to show which image you're uploading before you upload it - nothing more.

  9. #9
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Strange, it does work even when the script is hosted on a remote server, contrary to what microsoft says on this page.

    Looks like grabbing the path to a file (and doing whatever you want with it) is not a security issue for IE/FF.

    If I were so inclined, I could determine the machine account name for 50&#37; of the people who uploaded images. That doesn't seem very secure to me.

    However for your file preview, it works pretty well.

  10. #10
    SitePoint Zealot
    Join Date
    Jun 2006
    Location
    California
    Posts
    105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Check out this example / demo:

    http://www.air4web.com/files/upload/

    That's exactly what I need to do. All I need to do now is to add a caption (input text box) along with each thumbnail and convert the PHP to Coldfusion.
    Last edited by forumposters; Feb 9, 2007 at 20:42.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •