Discussion :

[Khleo]

Bonjour,

Je voudrais faire une upload de fichier en utilisant jquery et la méthode ajax.

D'après ce post ça semblerait possible sans utiliser de plugins supplémentaires : http://stackoverflow.com/a/8758614/2255168

J'ai donc essayé de faire la même chose en l'adaptant à mon script :

Mon code 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
<form id="upload" enctype="multipart/form-data">
 
<fieldset>
<legend>HTML File Upload</legend>
 
<div>
	<label for="fileselect">Files to upload:</label>
	<input type="file" id="fileselect" name="fileselect[]" multiple="multiple" />
	<div id="filedrag">or drop files here</div>
</div>
 
<div id="submitbutton">
	<button type="submit">Upload Files</button>
</div>
 
</fieldset>
 
</form>

Mon 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
	// 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();
	}
 
	function $id(id) {
		return document.getElementById(id);
	}
 
	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++) {
			UploadFile(f);
		}
 
	}
 
	function UploadFile(file) {
 
		var formData = new FormData(file);
 
		$.ajax({
			url: 'upload.php',  //server script to process data
			type: 'POST',
			data: 'data='+formData,
			dataType: 'file',
			xhr: function() {  // custom xhr
				myXhr = $.ajaxSettings.xhr();
				if(myXhr.upload){ // check if upload property exists
					myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // for handling the progress of the upload
				}
				return myXhr;
			},
			//Ajax events
			// beforeSend: beforeSendHandler,
			success: function (result)
			{
				console.info('ok '+result);
			},
			// error: errorHandler,
			// Form data
 
			//Options to tell JQuery not to process data or worry about content-type
			cache: false,
			contentType: false,
			processData: false
		});
 
	}

L'exécution de la fonction UploadFile() se passe bien, mon fichier upload.php se charge bien dans la console, par contre le console.info() dans le success lui ne s'affiche pas.

Chrome m'indique que les données transférées dans RequestPayload est
data=[object FormData]

Je voudrais savoir comment transférer le fichier à mon upload.php

Merci

[danielhagnoul]

Bonsoir

Pas encore lu, mais il existe un tutoriel : Système de transfert multiple de fichiers à l'aide de drag and drop

[Khleo]

Au final j'ai fait comme ça :

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
function UploadFile(file) {
	var xhr = new XMLHttpRequest();
	if (xhr.upload) {
		xhr.open("POST", '/upload.php', true);
		xhr.setRequestHeader("X_FILENAME", file.name);
		xhr.send(file);
 
		xhr.upload.addEventListener("progress", function(e) {
			var pc = parseInt((e.loaded / e.total * 100));
			// console.info(pc);
			$("#LoadingBar").css('width', pc+'%')
		}, false);
 
		xhr.onreadystatechange = function(e) {
			if (xhr.readyState == 2)
			{
				console.info("Traitement en cours");
			}
			else if (xhr.readyState == 4)
			{
				if (xhr.status == 200)
				{
					console.info("ok");
				}
				else
				{
					console.info("erreur");
				}
			}
		};
	}
}

et je récupére mon fichier avec php via :

Code php :

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

1
2
3
4
5
6
7
8
$fn = (isset($_SERVER['HTTP_X_FILENAME']) ? $_SERVER['HTTP_X_FILENAME'] : false);
 
if ($fn) {
file_put_contents(
	'temp/' . $fn,
	file_get_contents('php://input')
);
}

Et ça à l'air de fonctionner plutôt pas mal pour l'instant.