Accueil

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());

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)" ) );
}

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.

function test(){
  alert("test");
}

function func(){
  if('function' == typeof(test)){
    test();
  }
  else {
    alert("function not found");
  }
}

• request => $_POST;
• query => $_GET ($request->query->get('name'));
• cookies => $_COOKIE
• files => $_FILE;
• server => $_SERVER;
• headers => $_SERVER ($request->headers->get('Content-Type')).

$protocol = strtolower(substr($_SERVER["SERVER_PROTOCOL"],0,5))=='https'?'https':'http';

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>

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

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.

$content_file = file_get_contents('my_file.txt');

echo substr_count($content_file, "\n");

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>

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 !');
}