LaravelプロジェクトにユーザーアバターをアップロードするためにAjaxを実装する方法の詳細な説明

次のコラム Laravel チュートリアル では、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:

<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 メソッドを使用すると、アップロードされた画像を処理できるようになります: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">public function avatar()     {         $this-&gt;wrongTokenAjax();         $file = Input::file('image');         $input = array('image' =&gt; $file);         $rules = array(             'image' =&gt; 'image'         );         $validator = Validator::make($input, $rules);         if ( $validator-&gt;fails() ) {             return Response::json([                 'success' =&gt; false,                 'errors' =&gt; $validator-&gt;getMessageBag()-&gt;toArray()             ]);         }         $destinationPath = 'uploads/';         $filename = $file-&gt;getClientOriginalName();         $file-&gt;move($destinationPath, $filename);                 return Response::json(                     [                         'success' =&gt; true,                         'avatar' =&gt; asset($destinationPath.$filename),                     ]                 );             }     }</pre><div class="contentsignin">ログイン後にコピー</div></div>

注: アップロードする前に、画像が laravel の

public/

ディレクトリに作成されていることを確認してください uploads/ フォルダーに移動し、次のような対応するアクセス許可を付与します。

sudo chmod -R 777 uploads/

上記の

avatarUpload

メソッドには、wrongTokenAjaxMethod , これは、Laravel システムの token 値をテストするために使用されます。また、UsersController.php: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> public function wrongTokenAjax()     {         if ( Session::token() !== Request::get('_token') ) {             $response = [                 'status' =&gt; false,                 'errors' =&gt; 'Wrong Token',             ];             return Response::json($response);         }     }</pre><div class="contentsignin">ログイン後にコピー</div></div>5.Finally

## にも追加されます。 #画像をアップロードするための簡単な

Ajax

デモが完成しました。実際の開発では、次の問題も考慮する必要があります:

## ユーザーの違いに基づいて異なるフォルダーを作成するユーザー名またはユーザー ID。これらは、

avatarUpload

メソッド
1. $file->move($destinationPath, $filename)

   <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">File::exists($username) or File::makeDirectory($username);</pre><div class="contentsignin">ログイン後にコピー</div></div>##の前に使用できます。 #データベース内のユーザーの avatar

   フィールドを次のように更新します。
avatarUpload
2. メソッドがデータを返す前に、以下の同様のステートメントを使用します。 :

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

   エクスペリエンスをさらに向上させ、画像のトリミングとフィルターの追加を提供したい場合は、Intervention/Image php パッケージと Jcrop js 画像のトリミングを同時に使用できます。たとえば、

   function showResponse(response)  {
   
   }

   画像が正常に返された場合は、
$('#user-avatar').attr('src',response.avatar)
3. の後に実行します:

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

   画像のトリミングを実装できますフロントエンドで、トリミングされた画像の

   height、width

   、

   x-align などの対応するトリミング データを追加します。 処理のためにバックエンドに送信されるまで待つだけです。Intervention/Image を使用すれば、バックエンドでの画像の処理は簡単です。

以上がLaravelプロジェクトにユーザーアバターをアップロードするためにAjaxを実装する方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。