Plupload Html5 preview after selecting files

Question

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

Using Plupload.com File Downloader

I need a preview image after selecting a file for html5 runtime browsers.

Therefore, I add to the file Add 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>'; } }); 

The problem is that Plupload does not deliver a regular binary file object like html. Thank you for your help.

Answer 1

Plupload 2 has an image object that 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 loader: http://jsfiddle.net/Ec3te/2/

It works even in browsers that do not support the HTML5 file API (yes, even IE6).

Answer 2

 function showImagePreview( file ) { var reader = new window.FileReader(); reader.readAsDataURL(file.getNative()); reader.onload = function () { base64data = reader.result; base64data = base64data.substring(base64data.indexOf(",") + 1); var base_64_url = "data:" + file.type + ";base64," + base64data; } } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

Alternative showImagePreview (no moxi)