在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"> @@##@@ <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的話，在后端處理圖片就是輕而易舉的事情了！
