Is it possible to display a thumbnail of an image without uploading it to the server?

Question

I want the user to upload images to the server, add some information (for example, description, tags) about each image.
I use Uploadify to upload multiple images.

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

I want the user to have the following experience:

• Select multiple image files
• Immediately after this, enter additional information about each image when viewing image thumbnails.
• Click the button Upload Filesto upload images to the server and have a coffee ...

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

I would be grateful for any help!

Answer 1

If you can use a browser with support for HTML 5, you can use the api file

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

Answer 2

, . FileReader URL- ( File.url, , .) new Image(). DOM.

Answer 3

API- HTML5 , Flash Browserplus.

, , . Plupload. / "runtimes" . , - , .

, , HTML5/Gears/BrowserPlus/ .. API.

Answer 4

, flash java . Flash () (.. , ). java .

Answer 5

Xavier , . , .

$("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);
        }
    }
});

FileReader api. - , div, "image_place", . , script .