jquery 选择文件后加载 Html5 预览

oogrdqng 于 2022-11-22 发布在 jQuery

关注(0)|答案(3)|浏览(149)

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那样提供通常的二进制文件对象。感谢任何帮助。

jquery

来源：https://stackoverflow.com/questions/17339899/plupload-html5-preview-after-fileselect

3条答案

按热度按时间

t98cgbkg1#

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/wo9rc54a/
即使在不支持HTML5文件API的浏览器中也能工作（是的，甚至IE6）。

赞(0）回复(0）举报 2022-11-22

htzpubme2#

第一个
替代showImagePreview（不带mOxie）

赞(0）回复(0）举报 2022-11-22

li9yvcax3#

file.getNative()在版本3中似乎已损坏 *
请参阅：https://github.com/moxiecode/plupload/issues/1560
但是https://github.com/shinn-lancelot的这个解决方案非常好用

uploader.bind('FilesAdded', function (up, files) {
    const reader = new FileReader();

    reader.addEventListener('load', () => {
        console.log('data url: ', reader.result);
        document.getElementById('image-preview').src = reader.result;
    });

    reader.readAsDataURL(files[0].getSource().getSource());
});

赞(0）回复(0）举报 2022-11-22

我来回答

jquery 选择文件后加载 Html5 预览

3条答案

相关问题

热门标签

最新问答

jquery 选择 文件 后 加载 Html5 预览

3条答案

相关问题

热门标签

最新问答

jquery 选择文件后加载 Html5 预览