[JQuery] JQUERY multifile.js upload de plusieurs fichiers : comment ?

**polothentik** · 30/04/2008, 16h13

Bonjour,

J'ai parcouru le WEB en long, en large et en travers à la recherche d'un outil pour uploader plusieurs fichiers simultanéments et je suis tombé sur le FRAMEWORK surpuissant JQuery. Seulement voilà, je débute en AJAX et j'aurais besoin d'un bon coup de main !

Pour ceux qui ne connaitraient pas la puissance de JQuery et de ses délicieux plugins... un ptit coup d'oeil ici pour les 10 meilleurs !

Pour revenir à mon problème d'upload, je souhaite mettre en place un multi upload sans le plugin MetaData à l'aide de ce tutoriel. Je pense avoir compris comment rédiger mon formulaire et la fonction javascript à créer mais je ne comprends pas comment et où dans le code je dois spécifier le fichier php à appelé pour faire l'upload.

Fichier formulaire.htm :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
 
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Multi-upload facile avec JQUERY</title>
	<link rel="stylesheet" href="style.css" type="text/css" />
	<script src="JQuery.js" type="text/javascript" language="javascript"></script>
	<script src="JQuery.MultiFile.js" type="text/javascript" language="javascript"></script>
	<script src="test.js" type="text/javascript" language="javascript"></script>
</head>
 
<body>
<form action="" method="post" enctype="multipart/form-data" >
	<input type="file" class="multi-pt" id="fichier_pdf"/>
	<input type="file" class="multi-pt" id="fichier_dwg"/>
	<input type="button" value="Uploader les fichiers" onclick="sendFile();"/>
</form>
</body>
</html>

Fichier test.js :

Code :

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

1
2
3
4
5
6
7
8
9
10
$(function() {
	$('#docPDF').MultiFile({
							accept:'pdf',
							STRING: {
								remove: 'Retirer',
								selected: 'Selectionné: $file',
								denied: 'Le type d\'un des fichiers est invalide !'
								}
							});
				});

Questions : Est-ce que ma fonction $ ne sert uniquement qu'à afficher les uns sous les autres les fichiers à uploader ?

Est-ce que je dois créer un new Ajax.Request pour appeler mon php pour réaliser l'upload ?

HELP - Merci d'avance

(Je commence à avoir sacrément mal au crane !!!)

**pitxu** · 01/05/2008, 13h34

La fonction MultiFile ne fait que renvoyer un tableau avec les divers éléments du/des fichier/s :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
Array
(
    [name] => Array
        (
            [0] => fuck%20on%20first%20date.jpg
            [1] => ak.jpg
            [2] => 
        )
 
    [type] => Array
        (
            [0] => image/pjpeg
            [1] => image/pjpeg
            [2] => 
        )
 
    [tmp_name] => Array
        (
            [0] => C:\WINDOWS\Temp\php67.tmp
            [1] => C:\WINDOWS\Temp\php68.tmp
            [2] => 
        )
 
    [error] => Array
        (
            [0] => 0
            [1] => 0
            [2] => 4
        )
 
    [size] => Array
        (
            [0] => 132664
            [1] => 46322
            [2] => 0
        )
 
)

Le traitement de l'upload n'est pas effectué par Multifile, d'ailleurs je vois que tu appelles une fonction sendfile() sur un évènement onClick

**pitxu** · 01/05/2008, 17h21

Réflexion faite, le transfert est bien effectué par multifile, puisque le fichier est $_FILE["tmp_name"], il suffit donc de faire :

Code :

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

1
2
3
4
5
<?php
if (copy($FILE["file"]["tmp_name"][0], $chemin.$FILE["file"]["name"][0]))
{ echo "Upload OK"; }
else { echo "Erreur d'upload"; }
?>

avec un champ <input type=file id=file>

**polothentik** · 02/05/2008, 10h08

Je ne suis pas trop d'accord avec ta réponse vu qu'à aucun moment je ne spécifie le fichier PHP où l'upload va être effectué. Comment faire un upload multiple ? Je pensais faire :

JQuery.js --> MultiFile.js

MultiFile.js --> Formulaire.htm
Affichage des fichiers à uploader en liste verticale
method="post" action=""
Pour la validation type="button" onclick="---envoi du formulaire---'

Formulaire.htm --> UploadFiles.js
Ajax.Request pour l'envoi des données (je ne sais pas si c'est possible pour les données relatives au ficchier à uploader. Normalement oui puisque je n'ai qu'à envoyer le name de mon champ <input type="file"> Les fichiers étant sur le serveur en temporaire!)

UploadFiles.js --> upload.php
Upload du fichier

**pitxu** · 03/05/2008, 15h20

Envoyé par polothentik

Je ne suis pas trop d'accord avec ta réponse vu qu'à aucun moment je ne spécifie le fichier PHP où l'upload va être effectué. Comment faire un upload multiple ?

Tu n'as pas besoin de spécifier le répertoire de destination, il est configuré dans le fichier httpd.conf du serveur apache :
ici tmp_name = C:\WINDOWS\temp\php68.tmp où C:\WINDOWS\temp est la variable récupérée dans httpd.conf et php68.tmp le nom généré par multifile.
Tu n'as donc plus qu'à déplacer ton fichier du répertoire temporaire au répertoire définif ... THAT'S ALL

Pour l'upload multiple, tous les fichiers ajoutés à la liste par l'utilisateur seront contenu dans la même et unique balise <input type="file" id="file" class="multi">

**polothentik** · 04/05/2008, 14h40

Attention, je ne parle pas de répertoire de destination mais du fichier PHP dans lequel le code pour l'upload est écrit. Je suis tout a fait d'accord avec toi pour ce qui est du repertoire temporaire !

Donc, je passerais par un Ajax.Request pour executer le code de mon fichier PHP et j'afficherais la réponse pour valider l'upload dans ma page HTML. Autrement dit, je ne place pas de action="blabla.php" dans la déclaration de mon form mais plutot une fonction javascript sur le button de validation avec onclick="sendFile.js".

Cela dit, dans le cas du multiupload, il est dit que lorsque l'upload ce fait avec du code PHP, il faut déclarer le name de l'input file tel que :

Code :

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

name="test[]"

pour incrémenter sans doute le nom dans un array et pour récupérer les différent fichiers (voir le site de l'auteur "tutoriel" dans le 1er post) Seulement cela ne marche pas puisqu'une erreur m'est renvoyée comme quoi j'utilise un array... effectivement ! : "undefined index file[]

Je ne saisi pas comment je dois gérer le traitement de l'upload dans le fichier PHP.

As-tu testé le MultiFile.js toi même ? Peux-tu m'éclairer sur le sujet ?

**polothentik** · 06/05/2008, 08h55

Je laisse cette discussion ouverte vu que le problème pour le plugin MultiFile.js de JQuery n'est pas réglé. Pour ma part, j'ai trouvé mon bonheur sur le site de développez.com :

Upload Multiple Efficace Simple Rapide et avec Style !

**Leclandestin** · 09/05/2008, 23h08

Envoyé par polothentik

Je laisse cette discussion ouverte vu que le problème pour le plugin MultiFile.js de JQuery n'est pas réglé. Pour ma part, j'ai trouvé mon bonheur sur le site de développez.com :

Upload Multiple Efficace Simple Rapide et avec Style !

As tu l'URL?

**polothentik** · 13/05/2008, 08h36

Voilà, c'est réglé !

Upload Multiple Efficace Simple Rapide et avec Style !

[JQuery] JQUERY multifile.js upload de plusieurs fichiers : comment ?

jQuery

Discussions similaires

Partager

Partager