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.
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/Ec3te/2/
Works even in browsers that don't support HTML5 File API (yes, even IE6).
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
(Withour mOxie)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With