tp5加ajax 上传图片

最新推荐文章于 2022-06-28 14:49:36 发布

原创最新推荐文章于 2022-06-28 14:49:36 发布 · 225 阅读

0 ·

CC 4.0 BY-SA版权

Vue & Vuetify 专栏收录该内容

27 篇文章

订阅专栏

本文介绍了如何在ThinkPHP5（TP5）框架下结合Ajax实现图片上传功能，重点强调前端Ajax使用change事件而不是click事件来触发文件选择和上传操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如图：
在这里插入图片描述

前端：

 <div class="col-sm-5">
     <input type="file" id="site_logo" name="site_logo" class="form-control" >
     <input type="hidden" id="site_Logo_input" name="site_logo" value="{$webSetting[14]['value']}">
     <img height="100%" width="150px" id="site_logo_img" src="" alt="">
 </div>
 <script>
	$("#site_logo").on('change',function () {
	     var formData = new FormData();
	     formData.append('file', $(this)[0].files[0]);
	     $.ajax({
	         type:"post",
	         url:"uploadImg",
	         data: formData,
	         contentType: false,
	         processData: false,
	         cache: false,
	         success:function(result){
	             console.log(result);
	             if(result.code == 200){
	                 $('#site_logo_img').attr('src',result.data.img)
	                 $('#site_Logo_input').val(result.data.img)
	             }
	         }
	     });
	 })
 </script>

后端：

 /**
     * 上传图片到阿里云
     * @return ApiResponse
     */
    public function uploadImg(){
        $files = request()->file()['file'];

        if(!$files)  return ApiResponse::error('图片没有上传');

        if(!$files->check([ 'ext' => 'jpeg,jpg,png,gif' ])){
            return ApiResponse::error('格式错误,请上传正确的图片');
        };

        $rs = $this->uploadAliyun($files->getInfo()['tmp_name']);

        if($rs){
            return ApiResponse::success('成功',['img'=>$rs]);
        }
        return ApiResponse::error('上传失败');

    }