Bonjour,

J'essaye d'utiliser le plugin "Blueimp-jQueryFileUpload" pour gérer les uploads de fichiers sur mon site. Ce plugin semble être la référence du domaine mais il est mal documenté et assez compliqué à prendre en main.

Par exemple, je souhaite faire quelque chose de très simple:
J'ai 2 input file, un pour charger une image et un autre pour charger un document.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
 
<form id="file-upload">
 
<!--File 1 : Image -->
<input id="file-img" name="file1" type="file">
<input id="txt-file-img" type="text" class="form-control" style="background:white;" readonly>
 
<!--File 2 : Document -->
<input id="file-doc" name="file2" type="file">
<input id="txt-file-doc" type="text" class="form-control" style="background:white;" readonly>
 
</form>
Je veux contraindre le type et la taille du fichier en fonction de l'input utiliser pour le sélectionner
Si input = file-img alors fichier accepté = png/jpeg/gif et taille limite = 4MB
Si input = file-doc alors fichier accepté = pdf/doc/txt et taille limite = 10 MB

Je précise que ça marche très bien avec un seul input mais si j'en ai deux je ne sais pas faire la différence entre les fichiers sélectionnés depuis file-img et file-doc...

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
 
$('#file-upload').fileupload({
    dataType: 'json',
    autoUpload: false,
    add: function (e, data) {
        var uploadErrors = [];
        var acceptImgTypes = /^image\/(gif|jpe?g|png)$/i;
        var acceptDocTypes = /^application\/(pdf|msword)$|^text\/plain$/i;
 
        /**TEST HERE**/
        /** Comment faire la différence entre les data provenant de file-img et les data provenant de file-doc ? ***/
        if(data.originalFiles[0]['type'].length && !acceptFileTypes.test(data.originalFiles[0]['type'])) {
            uploadErrors.push('Not an accepted file type');
        }
        if(data.originalFiles[0]['size'].length && data.originalFiles[0]['size'] > 4000000) {
            uploadErrors.push('File size is too big');
        }
        if(uploadErrors.length > 0) {
            alert(uploadErrors.join("\n"));
        } else {
        /** Même PB ici, j'ai besoin de faire la distinction afin de mettre à jour le bon input[type=text]***/
            $.each(data.files, function (index, file) {
                $("#txt-file-img").val(file.name);
                $("#txt-file-doc").val(file.name);
            });
 
            $("#btn_add_valid").on('click',function () { 
                $("#loading_modal").modal("show");  
                data.submit();
             });
        }
    },
    done: function (e, data) {
        $("#loading_modal").modal("hide");
        $("#output").html('<p class="sucess">OK!</p>');
    },
    progressall: function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#upload-progress .bar').css(
            'width',
            progress + '%'
        ).text(
            progress + '%'
        );
    },
    fail: function (e, data) {
        $("#output").html('<p class="error">FAIL!</p>');
    }
});
Si vous ne connaissez pas ce plugin mais que vous avez d'autres références dans le domaine, je suis preneur...
J'ai vraiment beaucoup de mal à faire des choses simples avec ce plugin!

Merci beaucoup pour votre aide