• wc之上传图片


    wc上传图片:以上传头像为例

    1.找到views/default/account/settings/profile.tpl.htm

    init_avatar_uploader($('#avatar_uploader'), $('#avatar_uploading_status'), $("#avatar_src"));//找到上传的三个控件

    2.找到../static/js/functions.js文件中使用了jquery中的AjaxUpload方法

    function init_img_uploader(upload_url, upload_name, upload_element, upload_status_elememt, perview_element)
    {
        return new AjaxUpload(upload_element, {
            action: upload_url,//处理的图片上传的action,此处应该为:../app/account/ajax.php中的avatar_upload_action()
            name: upload_name,
            responseType: 'json',//数据格式为json
            
            onSubmit: function (file, ext) {//提交时做的验证以及页面变化
                if (!new RegExp('(png|jpe|jpg|jpeg|gif)$', 'i').test(ext))
                {
                    alert('上传失败: 只支持 jpg、gif、png 格式的图片文件');
                    
                    return false;
                }
                
                this.disable();
                
                if (upload_status_elememt)
                {
                    upload_status_elememt.show();
                }
            },
            
            onComplete: function (file, response) {//数据从服务器返回时,做的处理
                this.enable();
                
                if (upload_status_elememt)
                {
                    upload_status_elememt.hide();
                }
                
                if (response.errno == -1)
                {
                    alert(response.errno);
                }
                else
                {
                    if (typeof(perview_element.attr('src')) != 'undefined')
                    {
                        perview_element.attr('src', response.rsm.preview + '?' + Math.floor(Math.random() * 10000));
                    }
                    else
                    {
                        perview_element.css('background-image', 'url(' + response.rsm.preview + '?' + Math.floor(Math.random() * 10000) + ')');
                    }
                }        
            }
        });
    }

    3.服务端的处理主要涉及到两个类../app/account/ajax.phpupload.php

    function avatar_upload_action()
        {
            AWS_APP::upload()->initialize(array(
                'allowed_types' => 'jpg,jpeg,png,gif',
                'upload_path' => get_setting('upload_dir') . '/avatar/' . $this->model('account')->get_avatar($this->user_id, '', 1),
                'is_image' => TRUE,
                'max_size' => get_setting('upload_avatar_size_limit'),
                'file_name' => $this->model('account')->get_avatar($this->user_id, '', 2),
                'encrypt_name' => FALSE
            ))->do_upload('user_avatar');if (AWS_APP::upload()->get_error())
            {
                switch (AWS_APP::upload()->get_error())
                {
                    default:
                        H::ajax_json_output(AWS_APP::RSM(null, '-1', AWS_APP::lang()->_t('错误代码') . ': ' . AWS_APP::upload()->get_error()));
                    break;
                    
                    case 'upload_invalid_filetype':
                        H::ajax_json_output(AWS_APP::RSM(null, '-1', AWS_APP::lang()->_t('文件类型无效')));
                    break;    
                    
                    case 'upload_invalid_filesize':
                        H::ajax_json_output(AWS_APP::RSM(null, '-1', AWS_APP::lang()->_t('文件尺寸过大, 最大允许尺寸为 %s KB', get_setting('upload_size_limit'))));
                    break;
                }
            }
            
            if (! $upload_data = AWS_APP::upload()->data())
            {
                H::ajax_json_output(AWS_APP::RSM(null, '-1', AWS_APP::lang()->_t('上传失败, 请与管理员联系')));
            }
            
            if ($upload_data['is_image'] == 1)
            {
                foreach(AWS_APP::config()->get('image')->avatar_thumbnail AS $key => $val)
                {            
                    $thumb_file[$key] = $upload_data['file_path'] . $this->model('account')->get_avatar($this->user_id, $key, 2);
                    
                    AWS_APP::image()->initialize(array(
                        'quality' => 90,
                        'source_image' => $upload_data['full_path'],
                        'new_image' => $thumb_file[$key],
                        'width' => $val['w'],
                        'height' => $val['h']
                    ))->resize();    
                }
            }
            
            $update_data['avatar_file'] = $this->model('account')->get_avatar($this->user_id, null, 1) . basename($thumb_file['min']);
            
            // 更新主表
            $this->model('account')->update_users_fields($update_data, $this->user_id);
            
            if (!$this->model('integral')->fetch_log($this->user_id, 'UPLOAD_AVATAR'))
            {
                $this->model('integral')->process($this->user_id, 'UPLOAD_AVATAR', round((get_setting('integral_system_config_profile') * 0.2)), '上传头像');
            }
            
            H::ajax_json_output(AWS_APP::RSM( array(
                'preview' => get_setting('upload_url') . '/avatar/' . $this->model('account')->get_avatar($this->user_id, null, 1) . basename($thumb_file['max'])
            ), 1, null));
        }

    4.大致流程完毕!

  • 相关阅读:
    字符编码
    visual studio 2015 安装记录和问题修复
    TCP状态转换图的理解
    静态库与动态库的编译链接
    运行库glibc
    堆栈的简单认识
    Makefile学习总结
    关于STM32单片机的IAP实现
    ubuntu12.0.4安装启动后无法进入图形操作界面
    观察者模式
  • 原文地址:https://www.cnblogs.com/fanglove/p/3192506.html
Copyright © 2020-2023  润新知