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épertoireuploads/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 :
-
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
avatarUploaddans la méthode$file->move($destinationPath, $filename)en utilisantFile::exists($username) or File::makeDirectory($username);
-
pour mettre à jour le champ
avatarde l'utilisateur dans la base de données, probablement comme ceci : dans leavatarUploadméthode Avant de renvoyer des données, utilisez une instruction similaire à la suivante :$user->avatar = your_avtar_upload_path; $user->save();
-
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 !