简体   繁体   English

Codeigniter图片上传并调整大小-swfupload

[英]codeigniter image upload and resize - swfupload

I am currently coding up a portion of site that allows the user to upload an image, and then choose an area of that image to crop. 我目前正在对网站的一部分进行编码,允许用户上传图片,然后选择该图片的一个区域进行裁剪。 I am wanting it so that that image is uploaded without the user having to submit the form, so I using a tool called swfupload, I have managed to get the image uploading, however I cannot get swfupload to create a thumbnail or even read in my thumbnail method. 我想要这样,以便用户无需提交表单即可上传图像,因此我使用了名为swfupload的工具,我设法将图像上传了,但是我无法通过swfupload来创建缩略图,甚至无法读入缩略图方法。

Below is my code, 下面是我的代码,

PHP 的PHP

public function upload()
    {
        $config['upload_path'] = "./media/uploads/users";
        $config['allowed_types'] = 'gif|jpg|png';
        $config['max_size']    = '1000';
        $config['max_width']  = '1024';
        $config['max_height']  = '768';
        $config['encrypt_name']  = TRUE;

        $this->load->library('upload', $config);


        if ( ! $this->upload->do_upload('Filedata'))
        {
            $error = array('error' => $this->upload->display_errors());
            //die(print_r($error));
        }
        else
        {
            $this->file = $this->upload->data();
            echo $this->file['file_name'];
        }
    }

    public function thumbnail()
    {
                //lets just try and get thumbnail() talking to swfupload
        echo 1;
    }

swfupload js swfupload js

window.onload = function () {
            swfu = new SWFUpload({
                // Backend Settings
                upload_url: "http://lcl.moovjob.com/index.php/admin/users/upload",
                post_params: {"PHPSESSID": "<?php echo $this->session->userdata('session_id'); ?>" },

                // File Upload Settings
                file_size_limit : "5 MB",   // 5MB
                file_types : "*.jpg",
                file_types_description : "JPG Images",
                file_upload_limit : "0",

                // Event Handler Settings - these functions as defined in Handlers.js
                //  The handlers are not part of SWFUpload but are part of my website and control how
                //  my website reacts to the SWFUpload events.
                file_queue_error_handler : fileQueueError,
                file_dialog_complete_handler : fileDialogComplete,
                upload_progress_handler : uploadProgress,
                upload_error_handler : uploadError,
                upload_success_handler : uploadSuccess,
                upload_complete_handler : uploadComplete,

                // Button Settings
                button_image_url : "images/SmallSpyGlassWithTransperancy_17x18.png",
                button_placeholder_id : "spanButtonPlaceholder",
                button_width: 180,
                button_height: 18,
                button_text : '<span class="button">Select Images <span class="buttonSmall">(2 MB Max)</span></span>',
                button_text_style : '.button { font-family: Helvetica, Arial, sans-serif; font-size: 12pt; } .buttonSmall { font-size: 10pt; }',
                button_text_top_padding: 0,
                button_text_left_padding: 18,
                button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT,
                button_cursor: SWFUpload.CURSOR.HAND,

                // Flash Settings
                flash_url : "/media/flash/swfupload.swf",

                custom_settings : {
                    upload_target : "divFileProgressContainer"
                },

                // Debug Settings
                debug: true
            });
        };

My Handlers js, in particular the upload success method, 我的Handlers js,尤其是上传成功方法,

function uploadSuccess(file, serverData) {
    try {
        var progress = new FileProgress(file,  this.customSettings.upload_target);

        if (serverData.substring(0, 7) === "FILEID:") {
            addImage("http://local.test.com/index.php/admin/users/thumbnail");

            progress.setStatus("Thumbnail Created.");
            progress.toggleCancel(false);
        } else {
            addImage("images/error.gif");
            progress.setStatus("Error.");
            progress.toggleCancel(false);
            alert(serverData);

        }


    } catch (ex) {
        this.debug(ex);
    }
}

What am i doing for the time being all I want to is for the image to upload and then return 1 so I know swfupload is talking to my controller. 我目前正在做什么,就是要上传图像,然后返回1,所以我知道swfupload正在与控制器通信。 All i get back is upload success or error. 我得到的只是上传成功或错误。

You can use jquery file uplaoder with Image area select plugin of jquery. 您可以将jquery文件升级程序与jquery的Image area select插件一起使用。 This is the URL for image area select plugin: http://odyniec.net/projects/imgareaselect/ 这是图像区域选择插件的URL: http : //odyniec.net/projects/imgareaselect/

I'm a little confused why you don't add the thumbnail method to the end of your upload function? 我有些困惑,为什么不将缩略图方法添加到上传功能的末尾? There is no need to do these operations seperately as far as I can think of. 据我所想,没有必要单独进行这些操作。

You already have a check for successful uploads in your upload function, so before it returns any data, pass the filename/dir to your thumbnail function, create the thumbnail and then return success or failure to your js that way. 您已经在上传函数中检查了上传是否成功,因此在返回任何数据之前,请将文件名/目录传递给缩略图函数,创建缩略图,然后以这种方式将成功或失败返回给您的js。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM