IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Contribuez .NET Discussion :

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


Sujet :

Contribuez .NET

  1. #1
    Membre éprouvé
    Avatar de Pelote2012
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Mars 2008
    Messages
    925
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Haute Vienne (Limousin)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mars 2008
    Messages : 925
    Billets dans le blog
    2
    Par défaut Customisation et complétion du File Upload en VB.NET/ Jqueryui de BlueImp
    Bonjour,

    Je vous propose un nouvel élément à utiliser : 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

    Qu'en pensez-vous ?

  2. #2
    Membre éprouvé
    Avatar de Pelote2012
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Mars 2008
    Messages
    925
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Haute Vienne (Limousin)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mars 2008
    Messages : 925
    Billets dans le blog
    2
    Par défaut
    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 - 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
     
     <!-- 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 - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    .Err .name
    {
        color: #FF0000;
    }
    associé à
    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
    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 - Visualiser dans une fenêtre à part
    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');
                                }
                            });
                        }
                    });
    et remplacer
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $(this).find('.error').text(error);
    par
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $(this).attr("title", error);

  3. #3
    Membre éprouvé
    Avatar de Pelote2012
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Mars 2008
    Messages
    925
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Haute Vienne (Limousin)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mars 2008
    Messages : 925
    Billets dans le blog
    2
    Par défaut Correctif
    Je viens de remplacer le Zip pour corriger une erreur au niveau du Handler.aspx sur l'upload de fichier chuncké

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [Upload] file Upload: mettre un fichier sur le serveur
    Par eseb777 dans le forum Langage
    Réponses: 4
    Dernier message: 07/03/2007, 10h01
  2. [Upload] file upload preload
    Par taffMan dans le forum Langage
    Réponses: 3
    Dernier message: 17/12/2006, 21h13
  3. [Struts][file upload] Exception Bizarre
    Par pmartin8 dans le forum Struts 1
    Réponses: 1
    Dernier message: 23/05/2006, 17h55
  4. [STRUTS][HTPPS]File upload
    Par jiraiya dans le forum Struts 1
    Réponses: 2
    Dernier message: 18/05/2006, 14h54
  5. [com applet-servlet][file upload] CharConversionException
    Par meufeu dans le forum Servlets/JSP
    Réponses: 2
    Dernier message: 10/08/2004, 12h03

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo