Discussion :

[Asdorve]

Bonjour,

Lorsque je sélectionne des fichiers via "Parcourir", j'arrive à les uploader sur mon serveur.

Par contre, lorsque je les "drag and drop", impossible de les uploader.

Voici mes codes:

Index.html

Code html :

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
<form id="upload" action="upload.php" method="POST" target="new" enctype="multipart/form-data">
 
<fieldset>
<legend>Charger un fichier</legend>
 
<input type="hidden" id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" value="300000" />
 
<div>
	<label for="fileselect">Fichiers &agrave; charger:</label><BR><BR>
	<input type="file" id="fileselect" name="fileselect[]" multiple />
	<div id="filedrag">ou d&eacute;posez vos fichiers ici</div>
</div>
 
<div id="submitbutton">
 
  <!--<input type="submit" value="Ajouter">-->
	<button type="submit">Upload Files</button>
</div>
 
</fieldset>
 
</form>
 
<div id="messages">
<p>Status Messages</p>
</div>
 
<script src="filedrag.js"></script>

filedrag.js

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
 
/*
filedrag.js - HTML5 File Drag & Drop demonstration
Featured on SitePoint.com
Developed by Craig Buckler (@craigbuckler) of OptimalWorks.net
*/
(function() {
 
	// getElementById
	function $id(id) {
		return document.getElementById(id);
	}
 
 
	// output information
	function Output(msg) {
		var m = $id("messages");
		m.innerHTML = msg + m.innerHTML;
	}
 
 
	// file drag hover
	function FileDragHover(e) {
		e.stopPropagation();
		e.preventDefault();
		e.target.className = (e.type == "dragover" ? "hover" : "");
	}
 
 
	// file selection
	function FileSelectHandler(e) {
 
		// cancel event and hover styling
		FileDragHover(e);
 
		// fetch FileList object
		var files = e.target.files || e.dataTransfer.files;
 
		// process all File objects
		for (var i = 0, f; f = files[i]; i++) {
			ParseFile(f);
		}
 
	}
 
 
	// output file information
	function ParseFile(file) {
 
		Output(
			"<p>File information: <strong>" + file.name +
			"</strong> type: <strong>" + file.type +
			"</strong> size: <strong>" + file.size +
			"</strong> bytes</p>"
		);
 
	}
 
 
	// initialize
	function Init() {
 
		var fileselect = $id("fileselect"),
			filedrag = $id("filedrag"),
			submitbutton = $id("submitbutton");
 
		// file select
		fileselect.addEventListener("change", FileSelectHandler, false);
 
		// is XHR2 available?
		var xhr = new XMLHttpRequest();
		if (xhr.upload) {
 
			// file drop
			filedrag.addEventListener("dragover", FileDragHover, false);
			filedrag.addEventListener("dragleave", FileDragHover, false);
			filedrag.addEventListener("drop", FileSelectHandler, false);
			filedrag.style.display = "block";
 
			// remove submit button
			//submitbutton.style.display = "none";
		}
 
	}
 
	// call initialization file
	if (window.File && window.FileList && window.FileReader) {
		Init();
	}
 
 
})();

Voyez-vous pourquoi?

Merci

Xavier

[Watilin]

lorsque je les "drag and drop", impossible de les uploader.

[…]

Voyez-vous pourquoi?

Oui, je vois pourquoi.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
    // is XHR2 available?
    var xhr = new XMLHttpRequest();
    if (xhr.upload) {
 
      // file drop
      filedrag.addEventListener("dragover", FileDragHover, false);
      filedrag.addEventListener("dragleave", FileDragHover, false);
      filedrag.addEventListener("drop", FileSelectHandler, false);
      filedrag.style.display = "block";
 
      // remove submit button
      //submitbutton.style.display = "none";
    }

À aucun moment le xhr n’est utilisé, ni dans ce if, ni dans les autres fonctions. En fait, à part un affichage des informations avec Output, ton script ne fait rien de concret.

L’envoi de fichiers avec XMLHttpRequest n’est pas très compliqué, il suffit de simuler le comportement normal du formulaire avec un FormData. Cet objet est quasiment magique, il fait tout le travail à notre place

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
    ...
 
    let files = e.target.files || e.dataTransfer.files;
    let formData = new FormData();
 
    for (let f of files) {
      ParseFile(f);
      formData.append("fileselect[]", f);
    }
 
    let req = new XMLHttpRequest();
 
    // ajouter la gestion des évènements / erreurs
    ...
    ...
    ...
 
    req.open("POST", "upload.php");
    req.send(formData);

N’oublie pas que tu peux inspecter les requêtes dans l’onglet réseau de la console F12.

Côté serveur, les données sont accessibles comme d’habitude via la variable $_FILES.

Note : Je pense que c’est une mauvaise idée de lancer immédiatement l’envoi des fichiers sur un évènement change de l’input ou au moment du drop. Il vaut mieux laisser à l’utilisatrice ou l’utilisateur le droit à l’erreur, en lui donnant la possibilité de voir les fichiers sélectionnés avant de valider l’envoi. C’est ce que fait par exemple le site Imgur.

(D’ailleurs, ce site fait quelque chose de malin : il intercepte les drops sur toute la page. C’est une bonne idée car sinon, un fichier déposé dans une page web à un endroit qui n’annule pas le drop va avoir divers effets indésirables, comme l’ouverture de nouveaux onglets ou le remplacement de la page actuelle.)

Également, ton code actuel n’agit pas sur l’évènement submit du formulaire, ce qui fait que celui-ci est envoyé de manière classique quand on clique sur le bouton submit. Je suggère que tu remplaces ton écouteur actuel de change sur l’input file, par un écouteur de submit sur le formulaire entier. Annule l’évènement avec preventDefault pour empêcher l’envoi classique.

Code :

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

1
2
3
4
5
document.querySelector("#upload").addEventListener("submit", function (submitEvent) {
    submitEvent.preventDefault();
 
    ...
});

[Asdorve]

Bonjour,

Merci pour ces informations.

Je prends tout ça en compte et je vais essayer de m'en sortir.

Xavier