Plupload 创建多种尺寸的缩略图答案

【问题标题】：Plupload Create multiple sized thumbnailsPlupload 创建多种尺寸的缩略图
【发布时间】：2013-02-07 22:46:55
【问题描述】：

我在客户端创建和上传缩略图图像时发现了这个线程。踏板显示如何上传第一张图片，然后通过调整大小并再次上传来跟进。我想知道是否有一种简单的方法可以添加另一个步骤，以便最终结果会产生原始、中等大小和缩略图

A better solution is to trigger QueueChanged in the FileUploaded handler, and then call refresh. This will initiate the upload again for the same file and you can set a property that you read in the BeforeUpload handler to adjust the file size.

警告#1：您应该在全尺寸图像之后上传缩略图，否则全尺寸图像可能会出现一些缓冲区问题并被截断。

警告 #2：这仅在对 FileUploaded 的绑定调用发生在 uploader.init() 之后才有效，否则上传者自己的 FileUploaded 处理程序将在处理程序之后将 file.status 覆盖回 DONE。

下面是这个帖子Plupload Thumbnail的原始回复

uploader.bind('BeforeUpload', function(up, file) {
    if('thumb' in file)
      up.settings.resize = {width : 150, height : 150, quality : 100};
    else
      up.settings.resize = {width : 1600, height : 1600, quality : 100};
}

uploader.bind('FileUploaded', function(up, file) {
    if(!('thumb' in file)) {
        file.thumb = true;
        file.loaded = 0;
        file.percent = 0;
        file.status = plupload.QUEUED;
        up.trigger("QueueChanged");
        up.refresh();
    }
}

【问题讨论】：

标签： image-uploading plupload

【解决方案1】：

很简单，我在我的项目中就是这样做的，做了两个小调整。

在upload.php中我动态制作了目录信息：

$diretorio = $_REQUEST["diretorio"];
$targetDir = 'upload/'.$diretorio;

并修改了上传界面中的代码：

uploader.bind('BeforeUpload', function(up, file) {
    if('thumb' in file){

        //thumb
        up.settings.url = 'upload/upload.php?diretorio=thumbs',
        up.settings.resize = {width : 100, height : 75, quality : 60};

        // medium size
        up.settings.url = 'upload/upload.php?diretorio=medium',
        up.settings.resize = {width : 200, height : 150, quality : 60}; 

    }else{
        up.settings.url = 'upload/upload.php?diretorio=full-size',
        up.settings.resize = {quality : 100};
    }    
        uploader.bind('FileUploaded', function(up, file) {
            if(!('thumb' in file)) {
                file.thumb = true;
                file.loaded = 0;
                file.percent = 0;
                file.status = plupload.QUEUED;
                up.trigger("QueueChanged");
                up.refresh();
            }
    });            
});

【讨论】：

【解决方案2】：

Eduardo de Souza 给出的答案对我来说非常有用，但是这里的代码有一些变化不能上传中等文件，另一个是图像不能作为 resize 参数调整大小，因为我发现我的一些变化情况是：

var i = 1;
uploader.bind('BeforeUpload', function (up, file) {
                if ('thumb' in file) {
                    if (i == 1) {
                        //thumb
                        up.settings.url = 'http://localhost/plupload_new/public_html/upload.php?diretorio=thumb',
                                up.settings.resize = {width: 80, height: 80, enabled: true};
                    } else {
                        // medium size
                        up.settings.url = 'http://localhost/plupload_new/public_html/upload.php?diretorio=medium',
                                up.settings.resize = {width: 800, height: 600, enabled: true};
                    }
                } else {
                    up.settings.url = 'http://localhost/plupload_new/public_html/upload.php?diretorio=full';
                }
                uploader.bind('FileUploaded', function (up, file) {
                    if (!('thumb' in file)) {
                        file.thumb = true;
                        file.loaded = 0;
                        file.percent = 0;
                        file.status = plupload.QUEUED;
                        up.trigger("QueueChanged");
                        up.refresh();
                    } else {
                        if (i < 2) {
                            i++;
                            file.medium = true;
                            file.loaded = 0;
                            file.percent = 0;
                            file.status = plupload.QUEUED;
                            up.trigger("QueueChanged");
                            up.refresh();
                        }
                    }
                });
            });

在 resize 参数中添加了一个属性 enabled:true，它可以调整图像大小，并使用 i 变量进行一些检查，以便在中等 url 上获得通知，我认为这很有用。

【讨论】：