jqueryhtmlfile-uploadplupload

Plupload Html5 preview after Fileselect

http://jsfiddle.net/VjeTk/78/

Using Plupload.com File uploader

i want a preview image after file selection for html5 runtime browsers.

Therefor i add to the FilesAdded Event

uploader.bind('FilesAdded', function(up, files) {
    for (var i in files) {
        $('filelist').innerHTML += '<div id="' + files[i].id + '">' + files[i].name + ' (' + plupload.formatSize(files[i].size) + '<img src="' + SOMEHOWLOCALSOURCEOFIMAGE +'"/>') <b></b></div>';
    }
});

Problem is Plupload does not deliver the usual binary file object like html does. Thanks for ANY help.

Solution

  • Plupload 2 has an image object, which you can use: https://github.com/moxiecode/moxie/wiki/Image

    File.getSource() and mOxie.Image.embed() are the methods, you are interested in.

    https://github.com/moxiecode/plupload/wiki/File#wiki-getSource--method

    https://github.com/moxiecode/moxie/wiki/Image#wiki-embed-eloptions-method

    The jQuery UI queue widget uses this.

    Here's a working example for a custom uploader: http://jsfiddle.net/wo9rc54a/

    Works even in browsers that don't support HTML5 File API (yes, even IE6).