Plupload创建多个大小的缩略图

Question

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

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:仅当在uploader.init()之后发生对FileUploaded的绑定调用时才会起作用,否则上传者自己的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();
    }
}

Answer 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();
            }
    });            
});