小编给大家分享一下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:
{!! Form::open( [ 'url' => ['/avatar/upload/api'], 'method' => 'POST', 'id' => 'upload', 'files' => true ] ) !!}
更换新头像
{!! Form::close() !!}
在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(''+ value +'');
}
});
$("#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上传用户头像”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
网站名称：Laravel项目中如何实现Ajax上传用户头像
链接分享：
http://kswsj.cn/article/peodhp.html
