Plupload缩略图 [英] Plupload Thumbnail

问题描述

我工作的一个项目，有一个文件上传到S3。这是我的code：

I am working on a project and have to upload a file to s3. Here is my code:

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

在code工作。我上传文件到S3，并得到了我送的服务器来处理有效的响应。调整图像大小客户方同样适用。

The code works. I upload a file to S3 and get a valid response that I send for the server to handle. Resizing images clientside also works.

我想做现在要做的就是发送一个缩略图到服务器加上原有的文件。据我所知，这是不可能进入多个调整大小，选择在plupload初始化。我能做些什么，这样不仅原来的文件，而且它的大小调整后的版本被发送到S3？是不是也可以调整大小，直接在亚马逊的文件？

What I am trying to do now is send a thumbnail to the server together with the original file. As far as I know, it is not possible to enter multiple resize-options in the plupload initializer. What can I do, so that not only the original file, but also its resized version gets sent to S3? Is it also possible to resize files directly on Amazon?

我试图避免下载文件，并让我的服务器调整大小的选项，并再次上传在不同的分辨率。

I'm trying to avoid the option of downloading the file and making my server resize and upload it again in different resolutions.

感谢你在前进。

推荐答案

一个更好的解决方案是将触发 QueueChanged 在 FileUploaded 处理程序，然后调用刷新。这将再次启动上传了相同的文件，你可以设置你的 BeforeUpload 处理程序读取调整文件大小的属性。

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：您应该上传的缩略图全尺寸的图像之后，否则全尺寸图像可能有一些缓冲的问题，并得到切断

Warning #1: you should upload the thumbnail after the full-sized image, otherwise the full-sized image may have some buffer issues and get cut off.

警告＃2：这只会工作，如果绑定要求 FileUploaded 在发生uploader.init（），否则上传自己的处理程序 FileUploaded 将覆盖文件.STATUS 返回完成后处理程序。

Warning #2: This will only work if the bind call for FileUploaded happens after uploader.init(), otherwise the uploader's own handler for FileUploaded will overwrite file.status back to DONE after your handler.

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

这篇关于Plupload缩略图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！