HTML页面展示
<div class="avatar Javatar"><img src="<?=$user['avatar']?>"></div>
<form method="post" enctype="multipart/form-data" id="form_avatar" style="display:none;">
<input type="file" name="avatar" class="image"
url="<?=site_url('Muser/edit_avatar')?>"
urls="<?=M_LOGIN?>"
user="<?=site_url('muser')?>"
>
</form>
jquery处理:
//修改头像
$(document).on('click', '.Javatar', function () {
var form = document.getElementById('form_avatar');
form.getElementsByTagName('input').item(0).click();
})
$(document).on('change', '.image', function () {
var file = $(this)[0].files[0];
var supported = ['image/jpg', 'image/jpeg', 'image/png'];
if (supported.indexOf(file.type) < 0) {
this.Utils.mToast('不支持的图片类型');
this.clearFormAvatar();
return false;
}
if (file.size > 8 * 1024 * 1024) {
this.Utils.mToast('上传头像最大8M');
this.clearFormAvatar();
return false;
}
var url = $(this).attr('url');
var urls = $(this).attr('urls');
var user = $(this).attr('user');
var formdata = new FormData();
formdata.append('avatar', file);
console.log(formdata);
$.ajax({
url: url,
type: "post",
data: formdata,
dataType: 'json',
contentType: false,
processData: false,
cache: false,
success: function (data) {
layer.open({
content: data.error
, skin: 'msg'
, time: 1
});
if (data.code == 201) {
setTimeout(function () {
window.location = urls;
}, 1000);
} else if (data.code == 200) {
setTimeout(function () {
window.location = user;
}, 1000);
}
}
});
})
后台处理
public function edit_avatar()
{
$this->db->trans_begin();
try {
if (!isset($_SESSION['user_id']) || empty($_SESSION['user_id'])) {
throw new \Exception("请先登录", 201);
} else {
$user_id = $_SESSION['user_id'];
}
$avatar_data = isset($_FILES['avatar']) ? $_FILES['avatar'] : '';
if ($avatar_data == '') {
throw new \Exception("请上传图片", 202);
}
//设置配置偏好
$now = time() . mt_rand(1111, 9999);
$config['upload_path'] = './public/avatar/';
$config['allowed_types'] = 'gif|jpg|png';
$config['file_name'] = "avatar{$user_id}_{$now}";
//判断上传头像的文件夹是否存在 不存在创建文件夹
if (!is_dir($config['upload_path'])) {
mkdir($config['upload_path']);
}
//加载上传类
$this->load->library('upload', $config);
if ($this->upload->do_upload('avatar')) {
$img_info = $this->upload->data(); //循环得到含有所有信息的数组,并且赋值给二维数组
$now = time() . mt_rand(1111, 9999);
if (isset($img_info) && !empty($img_info)) {
$img_url = './public/avatar/' . $img_info['file_name'];
list($src_w, $src_h) = getimagesize($img_url); // 获取原图尺寸
$ext = substr($img_info['file_type'], strrpos($img_info['file_type'], '/') + 1);
$croped = '';
if ($ext == 'png') {
$croped = imagecreatefrompng($img_url);
} elseif ($ext == 'jpg' || $ext == 'jpeg') {
$croped = imagecreatefromjpeg($img_url);
} elseif ($ext == 'gif') {
$croped = imagecreatefromgif($img_url);
}
/*缩放---保证清晰度*/
$final_w = 300;
$final_h = $final_w * $src_h / $src_w;
$target = imagecreatetruecolor($final_w, $final_h);
imagecopyresampled($target, $croped, 0, 0, 0, 0, $final_w, $final_h, $src_w, $src_h);
/*处理文件结束*/
$timestamp = time();
if ($ext == 'png') {
imagepng($target, $img_url);
} elseif ($ext == 'jpg' || $ext == 'jpeg') {
imagejpeg($target, $img_url);
} elseif ($ext == 'gif') {
imagegif($target, $img_url);
}
imagedestroy($croped);
//上传到阿里云
$img_path = 'images/avatar/' . $img_info['file_name'];
$ossClient = new OssClient(OSS_ACCESSKEY_ID, OSS_ACCESSKEY_SECRET, OSS_ENDPOINT);
$ossClient->uploadFile(OSS_BUCKET, $img_path, dirname(dirname(dirname(__FILE__))) . '/public/avatar/' . $img_info['file_name']);
$user = $this->Model_user->get_user($user_id, true);
//上传了新图片 删除之前的旧图片
if (!empty($user['avatar'])) {
try {
$ossClient->deleteObject(OSS_BUCKET, $user['avatar']);
} catch (OssException $e) {
$errorMessage = $e->getMessage();
throw new \Exception('删除图片失败,message:' . $errorMessage, 203);
}
}
//开始入库
$data = array('avatar' => $img_path);
$result = $this->Model_user->edit_user($user_id, $data);
if ($result == 1) {
@unlink(dirname(dirname(dirname(__FILE__))) . '/public/avatar/' . $img_info['file_name']);
$this->db->trans_commit();
echo json_encode(['code' => 200, 'error' => '修改成功']);
} else {
/* 删除原来的图片文件 */
@unlink(dirname(dirname(dirname(__FILE__))) . '/public/avatar/' . $img_info['file_name']);
try {
$ossClient->deleteObject(OSS_BUCKET, $img_path);
} catch (OssException $e) {
$errorMessage = $e->getMessage();
throw new \Exception('删除图片失败,message:' . $errorMessage, 203);
}
throw new \Exception("修改失败", 204);
}
} else {
throw new \Exception('上传失败', 204);
}
} else {//上传失败
$error = $this->upload->display_errors();
throw new \Exception($error, 204);
}
} catch (\Exception $e) {
$this->db->trans_rollback();
$message = $e->getMessage() ? $e->getMessage() : "上传失败";
$code = $e->getCode() ? $e->getCode() : 249;
echo json_encode(['code' => $code, 'error' => $message]);
}
}