Customisation et complétion du File Upload en VB.NET/ Jqueryui de BlueImp

Le Zip contient un projet Visual Studio 2010. Dedans vous retrouvez le FileUpload JqueryUI de BlueImp.
Mais avec quelques modifications. J'ai impacter que 2 fichiers (jquery.fileupload-validate.js et jquery.fileupload-ui.js)

1/ Ajout de control du nom de fichier (sinon risque d'écraser fichier existant)
2/ Control de la taille totale de TLD côté js et côté vb (à cause IE9 controle pas taille de fichier que lors du chargement)
3/ Traduction en français des messages d'erreur
4/ Verrouillage bouton "Envoyer" si pas utile supprimer les appels à CheckEnvoyer
5/ Ajout du découpage (chunk) de fichier pour les browser le upportant
6/ Taille de fichier en Mo (au lieu Mb peu utilisé en France)
7/ Si Erreur ajout de la classe "Err" pour ne pas tenir compte de ces fichiers
8/ Ajout calcul de taille en octet (s'arrêter au kilo octet)
9/ Gestion des fichiers avec accent

Si vous avez d'autres idées d'améliorations ...
Toute aide sera la bienvenue

Signaler un problème

Pelote2012

Membre chevronné

Le 23/01/2014 à 16:21

Je me suis louper sur la mise en ligne

Si vous avez des questions ou des idées d'améliorations ...

Pour faire un simple lecteur de fichier d'un dossier:

Code html :

Sélectionner tout

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
  
 <!-- The file upload form used as target for the file upload widget --> 
                    <form id="fileupload" action="/Handler.ashx" method="post" enctype="multipart/form-data"> 
                    <!-- The table listing the files available for download --> 
                    <table role="presentation"> 
                        <tbody class="files"> 
                            <tr class="Entete"> 
                                <td> 
                                </td> 
                                <td class"tdFileName"> 
                                    Fichier 
                                </td> 
                                <tdclass"tdFileSize"> 
                                    Taille 
                                </td> 
                            </tr> 
                        </tbody> 
                    </table> 
                    </form> 
                    <!-- The template to display files available for upload --> 
                    <script id="template-upload" type="text/x-tmpl"> 
  
                    </script> 
                    <!-- The template to display files available for download --> 
                    <script id="template-download" type="text/x-tmpl"> 
{% for (var i=0, file; file=o.files[i]; i++) { %} 
    <tr class="template-download fade{% if (file.error) { %} Err{% } %}{% if (file.AddClass) { %} {%=file.AddClass%} {% } %}"> 
        <td> 
            <img src="{%=getPictpath(file.name)%}"/> 
        </td> 
        <td class="tdFileName"> 
            <p class="name"> 
               <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" >{%=file.name%}</a> 
            </p> 
        </td> 
        <td class="tdFileSize"> 
            <span class="size">{%=o.formatFileSize(file.size)%}</span> 
        </td>  
    </tr> 
{% } %} 
                    </script>

où tdFileName est dans une css mettant la width à taille fixe (pour ne pas avoir les colonnes qui changent de tailles à chaque nouveau fichier)
J'ai rajouté des nom aux colonnes.

Et si vous voulez mettre les erreurs en rouge

Code css :

Sélectionner tout

1
2
3
4
5
  
.Err .name 
{ 
    color: #FF0000; 
}

associé à

Code html :

Sélectionner tout

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
  
 <!-- The template to display files available for upload --> 
                    <script id="template-upload" type="text/x-tmpl"> 
{% for (var i=0, file; file=o.files[i]; i++) { %} 
    <tr class="template-upload fade"> 
        <td>                
                <img src="{%=getPictpath(file.name)%}" /> 
        </td> 
        <td class="tdFileName"> 
            <p class="name">{%=file.name%}</p> 
        </td> 
        <td class="tdFileSize"> 
            <p class="size">Processing...</p> 
            <div class="progress"></div> 
        </td> 
        <td class="tdFileOption"> 
            {% if (!i && !o.options.autoUpload) { %} 
                <button class="start">Chargement</button> 
            {% } %} 
            {% if (!i) { %} 
                <button class="cancel">Annulation</button> 
            {% } %} 
        </td> 
    </tr> 
{% } %} 
                    </script> 
                    <!-- The template to display files available for download --> 
                    <script id="template-download" type="text/x-tmpl"> 
{% for (var i=0, file; file=o.files[i]; i++) { %} 
    <tr title="{%=file.error %}" class="template-download fade{% if (file.error) { %} Err{% } %} > 
        <td> 
                            <img src="{%=getPictpath(file.name)%}" /> 
                        </td> 
        <td class="tdFileName"> 
            <p class="name"> 
                {% if (file.error) { %} 
                   {%=file.name%} 
                {% }else{ %} 
                    <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" >{%=file.name%}</a> 
                {% } %} 
            </p> 
        </td> 
        <td class="tdFileSize"> 
            {% if (!file.error) { %} 
                <span class="size">{%=o.formatFileSize(file.size)%}</span> 
            {% } %} 
        </td> 
        <td class="tdFileOption"> 
            <button class="delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>Effacer</button> 
            <input type="checkbox" name="delete" value="1" class="toggle"> 
        </td> 
    </tr> 
{% } %} 
                    </script>

Dans l'exemple ci-dessus j'ai mis les erreurs en title
faut dans ce cas aussi mettre à jour le fichier jquery.fileupload-ui.js
Trouvez l'emplacement de

Code javascript :

Sélectionner tout

1
2
3
4
5
6
7
8
9
10
11
12
13
14
}).fail(function () { 
                    if (data.files.error) { 
                        data.context.each(function (index) { 
                            var error = data.files[index].error; 
                            if (error) { 
                                //YL:modif bloquer le chargement des fichiers en erreurs 
                                data.context.find('.start').attr('disabled', true); 
                                data.context.find('.start').attr('aria-disabled', true); 
                                $(this).find('.error').text(error); 
                                data.context.addClass('Err'); 
                            } 
                        }); 
                    } 
                });