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.php与upload.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.大致流程完毕!