在編寫web程序的過程中，經(jīng)常會(huì)遇到一個(gè)經(jīng)典的文件上傳場(chǎng)景：上傳頭像（圖片）?；趯?duì)最好的用戶體驗(yàn)的追求，寫一下之前在項(xiàng)目中實(shí)現(xiàn)在Laravel項(xiàng)目中的Ajax上傳頭像。

1.配置路由

在Laravel的routes.php中設(shè)置路由：

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

2.配置控制器

在UsersController.php中增加對(duì)應(yīng)的avatar和avatarUpload這兩個(gè)方法，前者用來渲染視圖，后者處理實(shí)際上傳的圖像文件。

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

3.編寫前端代碼

這其實(shí)就是在對(duì)應(yīng)的users/文件夾的avatar.blade.php視圖文件中設(shè)置樣式,以下的HTML的各個(gè)標(biāo)簽可以根據(jù)自己的情況設(shè)置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中實(shí)現(xiàn)Ajax請(qǐng)求，這里的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方法，現(xiàn)在就可以處理上傳上來的圖片了：

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),                     ]                 );             }        }

注：在上傳之前，確認(rèn)在laravel的public/目錄下創(chuàng)建了uploads/文件夾，并給以相應(yīng)的權(quán)限，如：

sudo chmod -R 777 uploads/

在上面的avatarUpload方法中，有一個(gè)wrongTokenAjax方法，這是用來檢驗(yàn)Laravel體系的token值的，同樣是在UsersController.php中添加：

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

5.最后

到這里一個(gè)簡(jiǎn)單的Ajax上傳圖片的demo就完成了，在實(shí)際的開發(fā)中，我們還需要考慮以下幾個(gè)問題：

1. 根據(jù)用戶的不同用戶名或者用戶id來創(chuàng)建不同的文件夾，這些都可以在avatarUpload方法中 $file->move($destinationPath, $filename)之前使用

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

2. 更新數(shù)據(jù)庫(kù)中用戶的avatar字段，大概是這樣的：在avatarUpload方法返回?cái)?shù)據(jù)之前，使用下面的類似語句：

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

3. 如果你還想更進(jìn)一步改善體驗(yàn)，提供一些圖片的裁剪和添加濾鏡等功能，可以同時(shí)使用 Intervention/Image php包和Jcrop js圖片裁剪實(shí)現(xiàn)，比如在：

   function showResponse(response)  {  }

   中，如果成功的返回圖片，就在$('#user-avatar').attr('src',response.avatar)后執(zhí)行：

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

   就可以在前端實(shí)現(xiàn)圖片裁剪，然后將相應(yīng)的裁剪數(shù)據(jù)如裁剪圖片的height,width,x-align.y-align等傳到后端處理就可以，使用Intervention/Image的話，在后端處理圖片就是輕而易舉的事情了！