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.