Vérifier l'extension et la taille d'un fichier avant l'upload
bonjour a tous
j ai un copain qui m a gentiment fourni un code pour uploader des images
malheureusement je n ai plus de ses nouvelles
et j aurais souhaiter pouvoir afficher des alert si le format n est pas une image ou si la taille est trop grande
c est la dernière chose qui me manque pour finaliser mon site
et n y connaissant rien en javascript
je viens demander votre aide
voici le code du bouton qui envois l image
Code:
<button type="button" name="photo" value="Upload" onclick="submitUploadFileForm()" class="btn btn-primary btn-lg" style="width: 100px;height: 50px;color: #FFF;">Envoyer</button>
et le code javascript
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
| <script>
var pseudo = '<?php echo $pseudo;?>';
var id = '<?php echo $id ;?>';
console.log('ID', id, 'PSEUDO', pseudo); // pour voir si les variables se remplissent bien dans la console;..
function _(el) {
return document.getElementById(el);
}
function uploadFile() {
var file = _("photo").files[0];
var input_contenu = _("contenu");
var contenu = input_contenu.value;
var formdata = new FormData();
formdata.append("photo", file);
formdata.append("pseudo", pseudo);
formdata.append("id", id);
formdata.append("contenu", contenu);
//le temps des tests :
//alert('pseudo:' + pseudo + ' id: ' + id+ ' contenu: ' + contenu);
console.log('ID', id, 'PSEUDO', pseudo, 'CONTENU', contenu); // pour voir si les variables se remplissent bien dans la console;..
var ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", progressHandler, false);
ajax.addEventListener("load", completeHandler, false);
ajax.addEventListener("error", errorHandler, false);
ajax.addEventListener("abort", abortHandler, false);
ajax.open("POST", "cible-fichier.php"); // http://www.developphp.com/video/JavaScript/File-Upload-Progress-Bar-Meter-Tutorial-Ajax-PHP
//use file_upload_parser.php from above url
ajax.send(formdata);
}
function progressHandler(event) {
_("loaded_n_total").innerHTML = "Uploaded " + event.loaded + " bytes of " + event.total;
var percent = (event.loaded / event.total) * 100;
_("progressBar").value = Math.round(percent);
_("status").innerHTML = Math.round(percent) + "% uploaded... please wait";
}
function completeHandler(event) {
let res = typeof(event.target.responseText) != 'undefined' ? JSON.parse(event.target.responseText) : "";
document.getElementById("photo").value = "";
document.getElementById("contenu").value = "";
let message = typeof(res.message) != 'undefined' ? res.message : "";
let error = typeof(res.error) != 'undefined' ? res.error : null;
_("status").innerHTML = error ? error : messagepas bon ;
_("progressBar").value = 0; //wil clear progress bar after successful upload
}
function errorHandler(event) {
_("status").innerHTML = "Upload Failed";
}
function abortHandler(event) {
_("status").innerHTML = "Upload Aborted";
}
function submitUploadFileForm(){
if (document.getElementById('form_upload').reportValidity()) {
uploadFile();
}
}
</script> |
