3

私はプロジェクトに取り組んでおり、ファイルを s3 にアップロードする必要があります。これが私のコードです：

config = $.extend(Photo.Plupload.config, config);
var uploader = new plupload.Uploader({
            runtimes:'flash,silverlight',
            browse_button:config.select_button,
            max_file_size:config.max_file_size,
            url:'http://' + Photo.Album.Form.bucket + '.s3.amazonaws.com/',
            flash_swf_url:'/assets/plupload/js/plupload.flash.swf',
            silverlight_xap_url:'/assets/plupload/js/plupload.silverlight.xap',
            init:{
                FilesAdded:function (up, files) {
                    /*plupload.each(files, function (file) {
                     if (up.files.length > 1) {
                     up.removeFile(file);
                     }
                     });
                     if (up.files.length >= 1) {
                     $('#' + config.select_button).fadeOut('slow');
                     }*/
                },
                FilesRemoved:function (up, files) {
                    /*if (up.files.length < 1) {
                     $('#' + config.select_button).fadeIn('slow');
                     }*/
                }
            },
            multi_selection:true,
            multipart:true,
            multipart_params:{
                'key':config.key + '/${filename}',
                'Filename':'${filename}', // adding this to keep consistency across the runtimes
                'acl':config.acl,
                'Content-Type':config.content_type,
                'success_action_status':'201',
                'AWSAccessKeyId':Photo.Album.Form.access_key_id,
                'policy':Photo.Album.Form.policy,
                'signature':Photo.Album.Form.signature
            },
            filters:[
                {
                    title:config.filter_title,
                    extensions:config.filter_extentions
                }
            ],
            file_data_name:'file'
        });

        // instantiates the uploader
        uploader.init();

        // shows the progress bar and kicks off uploading
        uploader.bind('FilesAdded', function (up, files) {
            // add pseudofile to the sheet
            console.log(files);
            $.each(files, function (index, value) {
                value.name = "thumb_" + value.name;
            });
            console.log(files);
            console.log(up);
            uploader.start();
        });

        // binds progress to progress bar
        uploader.bind('UploadProgress', function (up, file) {
            /*if (file.percent < 100) {
             $('#progress_bar .ui-progress').css('width', file.percent + '%');
             }
             else {
             $('#progress_bar .ui-progress').css('width', '100%');
             $('span.ui-label').text('Complete');
             }*/
        });

        // shows error object in the browser console (for now)
        uploader.bind('Error', function (up, error) {
            // unfortunately PLUpload gives some extremely vague
            // Flash error messages so you have to use WireShark
            // for debugging them (read the README)

            alert('Что-то непонятное произошло. Firebug в помощь.');
            console.log('Expand the error object below to see the error. Use WireShark to debug.');

            console.log(error);
        });

        // when file gets uploaded
        uploader.bind('FileUploaded', function (up, file) {
            //console.log(up);
            //console.log(file);
            // save file location in the database
            Photo.Album.Form.post(file)
            up.refresh();
        });

コードは機能します。ファイルを S3 にアップロードし、サーバーが処理するために送信する有効な応答を取得します。画像のサイズ変更クライアント側も機能します。

私が今やろうとしているのは、元のファイルと一緒にサムネイルをサーバーに送信することです。私が知る限り、plupload 初期化子に複数のサイズ変更オプションを入力することはできません。元のファイルだけでなく、サイズ変更されたバージョンも S3 に送信されるようにするにはどうすればよいですか? Amazon でファイルのサイズを直接変更することもできますか?

ファイルをダウンロードしてサーバーのサイズを変更し、別の解像度で再度アップロードするオプションを回避しようとしています。

前もって感謝します。

4

2 に答える 2

3

より良い解決策は、ハンドラーでトリガーQueueChangedしてFileUploadedから、を呼び出すことrefreshです。これにより、同じファイルのアップロードが再度開始され、BeforeUploadハンドラーで読み取ったプロパティを設定してファイルサイズを調整できます。

警告＃1：フルサイズの画像の後にサムネイルをアップロードする必要があります。そうしないと、フルサイズの画像にバッファの問題が発生し、途切れる可能性があります。

警告＃2：これは、のbind呼び出しFileUploadedが後に発生した場合にのみ機能しますuploader.init()。そうでない場合、アップローダー自身のハンドラーは、ハンドラーの後FileUploadedに上書きfile.statusさDONEれます。

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();
    }
}
于 2013-01-11T02:25:51.900 に答える
1

誰かが興味を持っている場合に備えて、この問題に対する (おそらく一時的な) 解決策を見つけました。

        uploader.bind('UploadComplete', function (up, files) {
        console.log(uploader);
            // renew the file object
            if (config.complete == true) {
                // remove all files
                files = [];
                up.settings.multipart_params.key = config.key + '/${filename}';
                up.settings.resize = null;
            } else {
                up.settings.multipart_params.key = config.key + '/thumbs/${filename}';
                up.settings.resize = {width:100, height:100};
                $.each(files, function(index, value){
                    value.percent = 0;
                    value.status = 1;
                });
                config.complete = true;
                up.start();
            }
        });

したがって、 1. セマフォ変数「完全」を最初に false にします。2. 完了していない場合 -> 設定を変更してサムネイルを生成し、plupload を再起動します。完全を真に設定します。3. 完了した場合 -> ファイル キューを空にし、設定をリセットします。

醜いが仕事をする。私はまだ...もっときれいな解決策を探しています。

于 2012-07-16T23:30:28.873 に答える