下面由laravel教程栏目给大家介绍如何在laravel项目中实现ajax上传用户头像 ,希望对需要的朋友有所帮助！在laravel项目中实现ajax上传用户头像
在编写web程序的过程中，经常会遇到一个经典的文件上传场景：上传头像（图片）。基于对最好的用户体验的追求，写一下之前在项目中实现在laravel项目中的ajax上传头像。
1.配置路由在laravel的routes.php中设置路由：
route::get('/avatar/upload','userscontroller@avatar');route::post('/avatar/upload','userscontroller@avatarupload');
2.配置控制器在userscontroller.php中增加对应的avatar和avatarupload这两个方法，前者用来渲染视图，后者处理实际上传的图像文件。
public function avatar() { return view('users.avatar'); } public function avatarupload() { //some codes to deal with upload avatar }
3.编写前端代码这其实就是在对应的users/文件夹的avatar.blade.php视图文件中设置样式,以下的html的各个标签可以根据自己的情况设置class和id:
<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), ] ); } }
注：在上传之前，确认在laravel的public/目录下创建了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的话，在后端处理图片就是轻而易举的事情了！
以上就是详解laravel项目中实现ajax上传用户头像的方法的详细内容。