[AJAX] Upload de fichier

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:

---

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:

---

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:

---

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 !

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

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

Yop!

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

Problème résolu !

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

Code:

---

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:

---

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:

---

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. :)