在Fileselect之后加载Html5预览 [英] Plupload Html5 preview after Fileselect

问题描述

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

使用Plupload.com文件上传器

我希望为html5运行时浏览器选择文件后预览图像。

为此，我添加到FilesAdded事件

  uploader.bind（'FilesAdded'，function（up，文件）{
 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一样的常用二进制文件对象。
感谢您的任何帮助。

解决方案

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

$ b $ File.getSource（）和 mOxie.Image.embed（）是您感兴趣的方法。

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

< a href =https://github.com/moxiecode/moxie/wiki/Image#wiki-embed-eloptions-method =noreferrer> https://github.com/moxiecode/moxie/wiki/Image# wiki-embed-eloptions-method

jQuery UI队列部件使用这个。

自定义上传器的示例：
http://jsfiddle.net/Ec3te/2/

即使在不支持HTML5 File API的浏览器中也可以使用（是的，甚至是IE6）。

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).

这篇关于在Fileselect之后加载Html5预览的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！