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