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

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

藏色散人

リリース： 2021-02-17 10:14:38

転載

2336 人が閲覧しました

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->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><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' => false, 'errors' => 'Wrong Token', ]; return Response::json($response); } }</pre><div class="contentsignin">ログイン後にコピー</div></div>5.Finally

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

Ajax

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

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

avatarUpload

$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
フィールドを次のように更新します。
メソッドがデータを返す前に、以下の同様のステートメントを使用します。 :
```
$user->avatar = your_avtar_upload_path;

$user->save();
```
ログイン後にコピー
エクスペリエンスをさらに向上させ、画像のトリミングとフィルターの追加を提供したい場合は、Intervention/Image php パッケージと Jcrop js 画像のトリミングを同時に使用できます。たとえば、
```
function showResponse(response)  {

}
```
ログイン後にコピー
画像が正常に返された場合は、
の後に実行します:
```
 $('#user-avatar').Jcrop({
                aspectRatio: 1,
                onSelect: updateCoords,
                setSelect: [120,120,10,10]
                });
```
ログイン後にコピー
画像のトリミングを実装できますフロントエンドで、トリミングされた画像の
height、width
、
x-align などの対応するトリミングデータを追加します。 処理のためにバックエンドに送信されるまで待つだけです。Intervention/Image を使用すれば、バックエンドでの画像の処理は簡単です。

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