Discussion :

[R2D22]

Bonjour, je souhaiterais faire un formulaire d'upload de fichier sans rechargement de la page. J'aimerais ne pas utiliser de plugin et faire le maximum manuellement. En revanche jQuery me semble indispensable. J'ai donc ce code HTML :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<form>
    <input type="file" name="fileToUpload" id="fileToUpload">
    <input id="envoyer" type="submit" value="Upload Image" name="submit">
</form>

Ce code PHP (simplifié au maximum) :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file);

Et ce code Javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
$("#envoyer").click(function(){
 
    $.ajax({
       url : 'upload.php',
       type : 'POST',
       dataType : 'html',
    });
 
});

Rien ne se passe avec ce code. J'ai lu que AJAX ne transportait pas de fichiers, donc si je comprends bien il faut que je sérialise le fichier uploadé ?
Merci d'avance !

[NoSmoking]

Bonjour,
un lien qui devrait t’intéresser Upload de fichiers par ABCIWEB.

[R2D22]

Merci pour la réponse mais je préfère ne pas passer par un plugin. D'autres idées ? Merci d'avance.

[ryan]

Yop!

J'ai vu passer des solutions basées sur une iframe invisible.

[R2D22]

Problème résolu !

Etape 1 : créer un fichier index.html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<form id="uploadimage" action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="file" id="file" required />
<input id="sub" type="submit" value="Upload" class="submit" />
</form>

Etape 2 : ajouter bibliothèque jquery.

Etape 3 : ajouter ce code js au fichier html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
$("#uploadimage").on('submit',(function(e) {
   e.preventDefault();
   $.ajax({
      url: "upload.php", 
      type: "POST", 
     data: new FormData(this), 
     contentType: false,
     cache: false,  
     processData: false,
   });
}));

Etape 4 : créer un fichier upload.php :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
$sourcePath = $_FILES['file']['tmp_name']; 
$targetPath = "upload/".$_FILES['file']['name']; 
move_uploaded_file($sourcePath,$targetPath);

Etape 5 : créer un dossier "upload".

Voilà la méthode la plus simple de faire un upload sans rechargement de page.