Explication détaillée de la façon d'implémenter Ajax pour télécharger des avatars d'utilisateurs dans les projets Laravel

La colonne suivante du Tutoriel Laravel vous présentera comment implémenter le téléchargement d'avatars d'utilisateurs Ajax dans les projets Laravel. J'espère que cela sera utile aux amis dans le besoin !

Implémentation d'Ajax pour télécharger des avatars d'utilisateurs dans le projet Laravel

Dans le processus d'écriture de programmes Web, vous rencontrez souvent un scénario classique de téléchargement de fichiers : télécharger un avatar (image). Sur la base de la recherche de la meilleure expérience utilisateur, permettez-moi d'écrire sur l'avatar de téléchargement Ajax implémenté auparavant dans le projet Laravel.

1. Configurer le routage

Définir le routage dans routes.php de Laravel :

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

2. Configurer le contrôleur

Ajouter UsersController.php Il y en a deux correspondants. méthodes avatar et avatarUpload, la première est utilisée pour restituer la vue et la seconde traite le fichier image réellement téléchargé.

 public function avatar()
    {

        return view('users.avatar');
    }

  public function avatarUpload()
    {
    //some codes to deal with upload avatar
    }

3. Écrivez le code frontal

Il s'agit en fait de définir le style dans le fichier de vue users/ du dossier avatar.blade.php correspondant. utilisé en fonction de votre propre situation. Définissez class et 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>

pour implémenter les requêtes Ajax dans js. L'Ajax utilise ici le plug-in tiers de 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. Traitez les images téléchargées

Retournez à la méthode UsersController.php dans avatarUpload, et vous pouvez maintenant traiter les images téléchargées :

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



    }

Remarque : Dans Avant le téléchargement, confirmez que le dossier public/ est créé dans le répertoire uploads/ de Laravel et qu'il dispose des autorisations correspondantes, telles que :

sudo chmod -R 777 uploads/

Dans ce qui précède avatarUpload méthode, il existe une méthode wrongTokenAjax, qui est utilisée pour tester la valeur token du système Laravel, est également ajoutée dans UsersController.php :

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

            return Response::json($response);
        }

    }

Enfin

. voici un simple AjaxLa démo du téléchargement d'images est terminée. Dans le développement réel, nous devons encore considérer les problèmes suivants :

1. Créez-en différentes en fonction du nom d'utilisateur différent de l'utilisateur ou dossier ID utilisateur, ceux-ci peuvent être utilisés avant avatarUpload dans la méthode $file->move($destinationPath, $filename) en utilisant

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

2. pour mettre à jour le champ avatar de l'utilisateur dans la base de données, probablement comme ceci : dans le avatarUpload méthode Avant de renvoyer des données, utilisez une instruction similaire à la suivante :

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

3. Si vous souhaitez améliorer encore l'expérience et proposer un recadrage d'image et l'ajout de filtres, vous pouvez utiliser Intervention /Image en même temps Package PHP et implémentation de recadrage d'image Jcrop js, par exemple :

   function showResponse(response)  {
   
   }

   , si l'image est renvoyée avec succès, exécutez simplement après $('#user-avatar').attr('src',response.avatar) :

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

   pour obtenir l'image recadrage sur le front-end Ensuite, transmettez simplement les données de recadrage correspondantes, telles que height, width, x-align.y-align, etc. de l'image recadrée, au backend pour traitement si vous utilisez Intervention/. Image, traiter l’image sur le backend est un jeu d’enfant !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!