Upload fichier ajax natif
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:
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:
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
