JQUERY ajax 上传图片 php CI

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

    }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值