详解Laravel项目中实现Ajax上传用户头像的方法

2022-05-15 0 982

在Laravel项目中实现Ajax上传用户头像

在编写web程序的过程中,经常会遇到一个经典的文件上传场景:上传头像(图片)。基于对最好的用户体验的追求,写一下之前在项目中实现在Laravel项目中的Ajax上传头像。

1.配置路由

在Laravel的routes.php中设置路由:

Route::get('/avatar/upload','UsersController@avatar');Route::post('/avatar/upload','UsersController@avatarUpload');

2.配置控制器

UsersController.php中增加对应的avataravatarUpload这两个方法,前者用来渲染视图,后者处理实际上传的图像文件。

 public function avatar()    {        return view('users.avatar');    }  public function avatarUpload()    {    //some codes to deal with upload avatar    }

3.编写前端代码

这其实就是在对应的users/文件夹的avatar.blade.php视图文件中设置样式,以下的HTML的各个标签可以根据自己的情况设置classid:

<header class="profile-header"> <img id="user-avatar" src="https://wt-prj.oss.aliyuncs.com/0d06af79c49d4e08abb1ab3f7ab6e860/772c684b-10a4-43cf-8eec-dda9e28a5a23.png"><p id="validation-errors"></p><p class="avatar-upload" id="avatar-upload"> {!! Form::open( [ 'url' => ['/avatar/upload/api'], 'method' => 'POST', 'id' => 'upload', 'files' => true ] ) !!}<a href="#" class="btn button-change-profile-picture"><label for="upload-profile-picture"><span id="upload-avatar">更换新头像</span> <input name="image" id="image" type="file" class="manual-file-chooser js-manual-file-chooser js-avatar-field"></label></a>{!! Form::close() !!}<p class="span5"><p id="output" style="display:none"></p></p><span id="filename"></span> </header>

在js中实现Ajax请求,这里的Ajax借助了Jquery的第三方插件http://malsup.com/jquery/form/:

$(document).ready(function() {            var options = {                beforeSubmit:  showRequest,                success:       showResponse,                dataType: 'json'            };            $('#image').on('change', function(){                $('#upload-avatar').html('正在上传...');                $('#upload').ajaxForm(options).submit();            });        });    function showRequest() {        $("#validation-errors").hide().empty();        $("#output").css('display','none');        return true;    }    function showResponse(response)  {        if(response.success == false)        {            var responseErrors = response.errors;            $.each(responseErrors, function(index, value)            {                if (value.length != 0)                {                    $("#validation-errors").append('<p class="alert alert-error"><strong>'+ value +'</strong><p>');                }            });            $("#validation-errors").show();        } else {          $('#user-avatar').attr('src',response.avatar);        }    }

4.处理上传的图片

回到UsersController.php中的avatarUpload方法,现在就可以处理上传上来的图片了:

public function avatar()    {        $this->wrongTokenAjax();        $file = Input::file('image');        $input = array('image' => $file);        $rules = array(            'image' => 'image'        );        $validator = Validator::make($input, $rules);        if ( $validator->fails() ) {            return Response::json([                'success' => false,                'errors' => $validator->getMessageBag()->toArray()            ]);        }        $destinationPath = 'uploads/';        $filename = $file->getClientOriginalName();        $file->move($destinationPath, $filename);                return Response::json(                    [                        'success' => true,                        'avatar' => asset($destinationPath.$filename),                    ]                );            }    }

注:在上传之前,确认在laravelpublic/目录下创建了uploads/文件夹,并给以相应的权限,如:

sudo chmod -R 777 uploads/

在上面的avatarUpload方法中,有一个wrongTokenAjax方法,这是用来检验Laravel体系的token值的,同样是在UsersController.php中添加:

 public function wrongTokenAjax()    {        if ( Session::token() !== Request::get('_token') ) {            $response = [                'status' => false,                'errors' => 'Wrong Token',            ];            return Response::json($response);        }    }

5.最后

到这里一个简单的Ajax上传图片的demo就完成了,在实际的开发中,我们还需要考虑以下几个问题:

根据用户的不同用户名或者用户id来创建不同的文件夹,这些都可以在avatarUpload方法中 $file->move($destinationPath, $filename)之前使用

File::exists($username) or File::makeDirectory($username);

更新数据库中用户的avatar字段,大概是这样的:在avatarUpload方法返回数据之前,使用下面的类似语句:

$user->avatar = your_avtar_upload_path;$user->save();

如果你还想更进一步改善体验,提供一些图片的裁剪和添加滤镜等功能,可以同时使用 Intervention/Image php包和Jcrop js图片裁剪实现,比如在:

function showResponse(response)  {}

中,如果成功的返回图片,就在$('#user-avatar').attr('src',response.avatar)后执行:

 $('#user-avatar').Jcrop({                aspectRatio: 1,                onSelect: updateCoords,                setSelect: [120,120,10,10]                });

就可以在前端实现图片裁剪,然后将相应的裁剪数据如裁剪图片的height,width,x-align.y-align等传到后端处理就可以,使用Intervention/Image的话,在后端处理图片就是轻而易举的事情了!

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

【声明:根据2013年1月30日《计算机软件保护条例》2次修订第17条规定: 为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存 储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬! 鉴于此,也希望大家按此说明研究软件!】
本站所有源码尽量保证原汁原味,如有特殊情况会作出声明及标注,网站资源不做任何二次加密(原版加密除外,不影响程序使用的不会做解密处理),方便您更好的学习参考。 在您的能力范围内,为了大环境的良性发展,请尽可能的选择正版资源。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

即刻码站__国内靠谱的站长资源下载平台 php教程 详解Laravel项目中实现Ajax上传用户头像的方法 https://www.jike1995.com/36503.html

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度
查看详情

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务