5

クライアント側のサムネイル画像の作成とアップロードに関するこのスレッドを見つけました。トレッドは、最初の画像をアップロードしてから、サイズを変更して再度アップロードする方法を示しています。別のステップを追加する簡単な方法があるかどうか疑問に思っていたので、最終結果は元の、中サイズのサムネイルを生成します

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 の bind 呼び出しが 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();
    }
}
4

2 に答える 2

7

非常に簡単です。私は自分のプロジェクトでそれを行い、2 つの小さな調整を加えました。

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();
            }
    });            
});
于 2013-04-04T16:14:02.140 に答える
0

Eduardo de Souzaからの回答は私にとって非常に役立ちますが、このコードを機能させるための変更がいくつかあります。 :

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

enabled:true画像のサイズを変更する resize パラメータに属性を追加し、i中程度の URL で通知を受け取るための変数をチェックすることもできます。これは便利だと思います。

于 2015-08-10T04:31:41.830 に答える