Accueil
Upload de fichier avec Ajax, JQuery et XMLHTTPRequest 2
Ce tutoriel présente une technique afin d'uploader un fichier
dans un formulaire directement en Ajax, c'est-à-dire sans
rechargement de page, et en utilisant XMLHTTPRequest 2.
Soit le formulaire suivant possédant un input de type « file », un autre de type « text » et enfin un « textarea ». Nous souhaitons envoyer, du côté serveur, l’ensemble des données de ce formulaire à l’aide d’Ajax :
<form id="listedit_form_attachment" action="/app.php/attachment/createTo/111" method="post" enctype="multipart/form-data" >
<input type="file" id="attachment_fileTempAttachment" name="attachment[fileTempAttachment]" value="" />
<input type="text" id="attachment_titleAttachment" name="attachment[titleAttachment]" value="" />
<textarea id="attachment_commentAttachment" name="attachment[commentAttachment]" class="no-horizontal"></textarea>
<input type="hidden" id="attachment__token" name="attachment[_token]" value="d2ccaa122678bb5d11955691c2293186ced68253" />
<input type="submit" value="Envoi de fichier" id="listedit_submit" />
</form>
Le code JQuery :
$("#listedit_form_attachment").submit(function()
{
var fileInput = document.getElementById('attachment_fileAttachment');
var file = fileInput.files[0];
var formData = new FormData();
formData.append('file', file);
formData.append('attachment[titleAttachment]',$('#attachment_titleAttachment').val());
formData.append('attachment[commentAttachment]', $('#attachment_commentAttachment').val());
formData.append('attachment[fileAttachment]', 'file');
formData.append('attachment[_token]', $('#attachment__token').val());
$.ajax({
type: "POST",
url: "{{ path('Upload_File', { 'toId' : fatherEntity.id }) }}",
data: formData,
cache: false,
contentType: false,
processData: false,
async: false,
beforeSend: function () { $("#divLoading").show(); },
complete: function () { $("#divLoading").fadeOut(); },
success: function(data){
$('#listedit_form_div_{{ divA }}').html(data);
}
});
return false;
});
Remarque :
Les données seront envoyées, du côté serveur, grâce à « FormData ». La méthode « append » va setter les valeurs dans le « formdata ». Dans l’Ajax les variables « cache », « contentType », « processData » et « async » doivent être mises à « false ».
Du côté serveur (Symfony2) :
1/ On utilise exactement les mêmes méthodes que pour un formulaire soumis plus classiquement :
$em = $this->getDoctrine()->getEntityManager();
$attachment = new Attachment();
$attachmentForm = $this->createForm(new AttachmentForm(), $attachment);
$request = $this->getRequest();
$attachmentForm->bindRequest($request);
2/ Pour récupérer les données relatives au fichier, on utilisera :
$file = $request->files->get('file');
// Récupérer les erreurs
$file->getError();
// Récupérer son nom original
$file->getClientOriginalName();
// L’enregistrer dans un dossier
$file->move("attachments/", $file->getClientOriginalName());
Lire ...
Contrainte sur les fichiers dans un CallbackValidator (Symfony2)
Dans un formulaire, il y a un champ avec un nom « fileAttachment » et de type « file ». On souhaite mettre une contrainte dans un CallBackValidator, pour que la taille du fichier uploadé ne dépasse pas 7168 kiloOctets.
Mise en place de la contrainte :
$constraintStartDate = $attachmentForm->get("fileAttachment");
$validator = new FileValidator();
$data = $attachmentForm->getData();
$test = new File(array(
'maxSize' => '7168k',
'maxSizeMessage' => 'myMessage')
);
if(!$validator->isValid($constraintStartDate->getData(), $test))
{
$constraintStartDate->addError( new FormError( "This field is not valid (only alphanumeric characters separated by hyphens)" ) );
}
Lire ...
Enlever la protection CSFR d’un formulaire (Symfony2)
Le code qui suit permet de retirer la protection CSRF (Cross-Site Request Forgery) dans un formulaire Symfony 2.
public function getDefaultOptions(array $options)
{
return array(
'data_class' => 'Acme\TaskBundle\Entity\Task',
'csrf_protection' => false,
);
}
Ce code est à placer dans votre fichier "Form".
Attention : en faisant cela, vous risuqez d'introduire de la vulnérabilité dans votre formulaire.
Lire ...Tester l’existence d’une fonction en Javascript
function test(){
alert("test");
}
function func(){
if('function' == typeof(test)){
test();
}
else {
alert("function not found");
}
}
Lire ...
L’attribut « autocomplete » (HTML5)
L’attribut « autocomplete » s’applique à la fois à des balises « input » et « form ». Il permet d’éviter que le navigateur de l’utilisateur ne pré remplisse des champs qu’il a lui-même sauvegarder (exemple des noms d’utilisateur et autres mots de passe enregistrés).
Lorsque « autocomplete » est à « on » alors le navigateur complète la valeur du champ basé sur ce que l’utilisateur a précédemment renseigné.
Exemple :
<form action="demo_form.asp" method="get" autocomplete="on">
First name: <input type="text" name="fname" />
<br />
E-mail: <input type="email" name="email" />
<br />
<input type="submit" />
</form>
Lire ...
Supprimer les balises "<br / >" en fin de chaîne de caractères
preg_replace('#<[^>]+>$#','',$coNotationText);
Explication :
- Les caractères « # » représente la fin et le début de la chaîne de caractères
- Le caractère « * » signifie que l’on va remplacer l’ensemble des « <br /> »
- Le caractère « $ » signifie que l’on va remplacer l’ensemble des « <br /> » en fin de chaîne
Désactiver un bouton radio (ou autres) en JQuery
Ce mini-tutoriel présente une technique afin de désactiver techniquement et graphiquement un bouton radio.
HTML
<input id="form_radio_id" type="radio" value="3" name="form_transmission[sendingAlertType]" / >
JQUERY
$("#form_radio_id").attr('disabled','disabled');
En CSS, il existe un sélecteur permettant de sélectionner l’élément désactivé :
input:disabled + label {
color: grey;
}
Dans l’exemple ci-dessus, on a grisé le texte du label qui se trouve immédiatement après le bouton de radio.
Lire ...Sélectionner le texte d'un champ en Javascript
Le code suivant permet, en Javascript, de sélectionner le contenu d'un champ en cliquant sur un bouton :
<html>
<head>
<script>
function displayResult() {
document.getElementById("myTextarea").select();
}
</script>
</head>
<body>
<textarea id="myTextarea" cols="20"> At W3Schools you will find all the Web-building tutorials you need, from basic HTML to advanced XML, SQL, ASP, and PHP. </textarea>
<br />
<button type="button" onclick="displayResult()">Select contents of text area</button>
</body>
</html>
Lire ...
Valider une adresse email en Javascript
La façon la plus courante pour tester la validité d'une adresse email en Javascript est d'utiliser une expression régulière. Exemple :
var email = prompt("Entrez votre adresse e-mail : ", "javascript@wakonda.guru");
if (/^([a-z0-9._-]+)@([a-z0-9._-]+)\.([a-z]{2,6})$/.test(email)) {
alert('Partie locale : ' + RegExp.$1 + '\nDomaine : ' + RegExp.$2 + '\nExtension : ' + RegExp.$3);
} else {
alert('Adresse e-mail invalide !');
}
Lire ...
Rechercher
Tags
Articles récents
- Quel est le but de l'attribut "role" en HTML ?
- Changer la couleur de l'espace réservé (placeholder)
- Attention à cet email d’arnaque !
- Supprimer un fichier d'un référentiel Git sans le supprimer du système de fichiers local
- JS - Récupérer le dernier élément d'un tableau
- JS - Prévisualiser une image avec son upload
- PHP - Convertir une chaîne de caractères en un booléen
- PHP : Vérifier si une session a déjà été démarrée
- Créer un APK ou un AAB en ligne de commandes
- L'opérateur !! en Javascript