jquery - 在 Fileselect 之后 Plupload Html5 预览

Question

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

使用 Plupload.com 文件上传器

我想要为 html5 运行时浏览器选择文件后的预览图像。

因此我添加到 FilesAdded 事件

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>';
    }
});

问题是 Plupload 不像 html 那样提供通常的二进制文件对象。谢谢你的帮助。

Answer 1

Plupload 2 有一个图像对象，你可以使用它： https ://github.com/moxiecode/moxie/wiki/Image

File.getSource()并且mOxie.Image.embed()是您感兴趣的方法。

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

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

jQuery UI 队列小部件使用它。

这是自定义上传器的一个工作示例：http: //jsfiddle.net/Ec3te/2/

即使在不支持 HTML5 File API（是的，甚至 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>

替代品showImagePreview（不带 mOxie）