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>を使用して、Ajax リクエストを js で実装します。ここでは 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
メソッドを使用すると、アップロードされた画像を処理できるようになります: <pre class="brush:php;toolbar:false">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),
]
);
}
}</pre>
public/avatarUploadディレクトリに作成されていることを確認してください
uploads/
フォルダーに移動し、次のような対応するアクセス許可を付与します。sudo chmod -R 777 uploads/上記の
メソッドには、wrongTokenAjax
Method , これは、Laravel システムの token
値をテストするために使用されます。また、UsersController.php
: <pre class="brush:php;toolbar:false"> public function wrongTokenAjax()
{
if ( Session::token() !== Request::get('_token') ) {
$response = [
'status' => false,
'errors' => 'Wrong Token',
];
return Response::json($response);
}
}</pre>
5.Finally
Ajax
デモが完成しました。実際の開発では、次の問題も考慮する必要があります:## ユーザーの違いに基づいて異なるフォルダーを作成するユーザー名またはユーザー ID。これらは、
- メソッド
- $file->move($destinationPath, $filename)
<pre class="brush:php;toolbar:false">File::exists($username) or File::makeDirectory($username);</pre>
##の前に使用できます。 #データベース内のユーザーの
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
、、
widthx-align
などの対応するトリミング データを追加します。
処理のためにバックエンドに送信されるまで待つだけです。Intervention/Image を使用すれば、バックエンドでの画像の処理は簡単です。