I want let user to upload images to server add some info (like description, tags) about each image.
I use Uploadify to upload multiple images.

I wonder if it is possible to show thumbnails of the images (while the user enters the additional info about each image) before the images are actually uploaded to the server.

I want user to have the following experience:

• Select multiple image files
• Immediately after that enter additional information about each image while seeing images thumbnails
• Press Upload Files button to upload images to server, and go to drink coffee...

I found this script, but I think it also uploads the file before displaying the image thumbnail.

I would appreciate any help !

I want let user to upload images to server add some info (like description, tags) about each image.
I use Uploadify to upload multiple images.

I wonder if it is possible to show thumbnails of the images (while the user enters the additional info about each image) before the images are actually uploaded to the server.

I want user to have the following experience:

• Select multiple image files
• Immediately after that enter additional information about each image while seeing images thumbnails
• Press Upload Files button to upload images to server, and go to drink coffee...

I found this script, but I think it also uploads the file before displaying the image thumbnail.

I would appreciate any help !

• php
• javascript
• html
• file-upload
• uploadify

• 1 duplicate: stackoverflow./questions/771581/… – gblazex Commented Jul 11, 2010 at 13:08

5 Answers 5

If you could enforce an HTML 5 capable browser you could use the file-api

Example: http://html5demos./file-api

Sure it is possible. Use the FileReader object to get a data URL (or use File.url if you are sure the Client implements it.) and assign it to an new Image()object. Then you can insert the image into DOM.

As an alternative to the standard-based HTML5 APIs, you can use a plugin such as Flash or Browserplus.

There is actually a ready-made application which might do exactly what you want. It's called Plupload. You can upload your files / images using a variety of "runtimes", and do client-side image resizing before uploading. I guess you can hook a thumbnail preview somewhere in there, in certain runtimes.

Otherwise, you can try building what you want from scratch, using the HTML5 / Gears / BrowserPlus / etc. APIs.

I'm pretty sure flash and java can both do it. Flash would require certain (obvious) security precautions (ie, you can do this for any file, it must be selected by the user). Meanwhile java would show a security popup.

Xavier posted this solution on another thread, and I tried to improove it to work with multiple file inputs. I hope it helps.

$("body").on('change', 'input:file', function(e){
for (var i = 0; i < e.originalEvent.srcElement.files.length; i++) {

        var file = e.originalEvent.srcElement.files[i];

        var img = document.createElement("img");
        var reader = new FileReader();
        reader.onloadend = function() {
             img.src = reader.result;
        }
        img.width = "50";
        reader.readAsDataURL(file);
        if($(this).next().hasClass('image_place')){
          $(this).next('.image_place').html('').append(img);
        }else {
          $(this).after('<div class="image_place"></div>');
          $(this).next('.image_place').append(img);
        }
    }
});

It scans all file inputs in the document body and reads the image using the FileReader api. If it finds any images, it creates a div called "image_place" where he puts the image. If there's already a image inside, the script replaces the image.