Utilisation de base du composant de téléchargement de fichiers WebUploader

1. Origine

La communauté du site Web de l'entreprise dispose d'une fonction de téléchargement d'images. Étant donné que le site Web a déjà quelques années, le processus de téléchargement a été divisé en deux catégories. si le client prend en charge le flash ou non. Deux types de logique. Si Flash est pris en charge, utilisez le composant de téléchargement SWFuploader pour télécharger des fichiers. Cela offre une meilleure expérience utilisateur. Si Flash n'est pas pris en charge, utilisez des balises d'entrée ordinaires pour télécharger. Cette méthode a des fonctions incomplètes et une mauvaise expérience. Cependant, comme le navigateur Chrome ne prend pas en charge Flash par défaut, les utilisateurs utilisent la plupart du temps des balises d'entrée pour télécharger et l'expérience de téléchargement n'est pas bonne, nous avons donc décidé d'utiliser le composant de téléchargement webuploader de Baidu pour remplacer le composant de téléchargement d'origine. Si vous rencontrez des problèmes pendant le processus de remplacement, enregistrez les domaines qui nécessitent une attention particulière.

2. Notes sur l'utilisation de WebUploader

En fait, les plug-ins js tiers sont généralement utilisés de la même manière. Ils importent essentiellement des fichiers de ressources et initialisent le plug. -in objets selon la configuration, et utilisation d'objets ou d'événements d'écoute remplissent des fonctions spécifiques, et webuploader est similaire.

Fichier de ressources d'importation JS

<link href="../JS/webuploader/webuploader.css" rel="stylesheet" />
<script src="../JS/webuploader/jquery-1.12.4.min.js"></script>
<script src="../JS/webuploader/webuploader.js"></script>

Vous devez importer le fichier css, les fichiers jquery.js et webuploader.js de wepuploader.

Le fichier CSS est le fichier de style du bouton de téléchargement généré par webuploader pour vous. Si vous n'êtes pas satisfait du style par défaut, vous pouvez d'abord modifier le CSS vous-même pour répondre à vos besoins. Une autre méthode consiste à préparer votre propre fichier CSS, puis à modifier le code source de webuploader.js, puis à spécifier la classe du bouton, la classe mouseenter, la classe mouseleave, etc. L'emplacement du code webuploader.js est le suivant :

button.addClass('webuploader-pick');
                //button.addClass('btn');
                //button.addClass('btn-default');
    
                me.on( 'all', function( type ) {
                    var files;
    
                    switch ( type ) {
                        case 'mouseenter':
                            button.addClass('webuploader-pick-hover');
                            break;
    
                        case 'mouseleave':
                            button.removeClass('webuploader-pick-hover');
                            break;
    
                        case 'change':
                            files = me.exec('getFiles');
                            me.trigger( 'select', $.map( files, function( file ) {
                                file = new File( me.getRuid(), file );
    
                                // 记录来源。
                                file._refer = opts.container;
                                return file;
                            }), opts.container );
                            break;
                    }
                })

Étant donné que webuploader est basé sur jquery, jquery.js doit être importé et la version de jquery doit être supérieure à 1.10. L’astuce est que, comme le site Web est ancien, prototype.js était auparavant utilisé pour effectuer diverses opérations. Afin de transférer les droits d'utilisation $ au prototype, jQuery.noConflict() est également requis. Bien entendu, cette opération n'est généralement pas nécessaire.

La version de webuploader.js que j'utilise ici est la 0.1.2. J'utilisais la 0.1.5 auparavant. Cependant, lors de l'exécution d'un téléchargement flash dans la version 0.1.5, si le serveur ne renvoie pas de chaîne au format json, le code webuploader.js signalera une erreur et le client ne recevra pas les informations de retour. Ce que notre serveur renvoie est une chaîne ordinaire, il n'y a donc pas d'autre moyen que d'utiliser 0.1.2.

Initialisez l'objet webuploader

Avant d'initialiser l'objet, car le bouton de téléchargement est généré par webuploader lui-même, préparez d'abord la balise parent du bouton de téléchargement, et webuploader générera la balise de téléchargement dans le balise. Cela peut être div, span, etc. Ce que j'utilise est span :

<span id="uploadImage"></span>

Ensuite, je peux initialiser l'objet webuploader. Le code js est le suivant :

    var uploader = WebUploader.create({
        //是否允许重复的图片
        duplicate: true,
        auto: false, // 选完文件后，是否自动上传
        swf: '../JS/webuploader/Uploader.swf', // swf文件路径
        server: "/upload.html", // 文件接收服务端
        pick: { id: "#uploadImage", innerHTML: "本地上传图片" }, // 选择文件的按钮。可选
        // 只允许选择图片文件。
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/*'
        },
        //线程数
        threads: 1,
        //单个文件大小限制
        fileSingleSizeLimit: 2000,
        //上传文件数量限制
        fileNumLimit:10,
        //上传前不压缩
        compress:false,
    });

La méthode WebUploader.create() génère l'objet webuploader (il semble que cela il existe d'autres méthodes pour le générer, mais ce n'est pas le sujet), transmettez simplement l'objet de configuration

L'attribut serveur spécifie l'adresse du serveur pour le téléchargement du fichier.

L'attribut pick spécifie le bouton de téléchargement et l'identifiant spécifie quel bouton via le sélecteur de jquery (il n'est pas nécessaire qu'il s'agisse du sélecteur d'identifiant de #)

L'attribut swf spécifie où charger le swf fichier lorsque flash est activé (Webuploader est compatible en interne avec flash et h5, nous n'avons pas besoin de faire attention à la méthode qu'il utilise)

auto Après avoir sélectionné le fichier, je ne sais pas si je dois le télécharger automatiquement. Je n'utilise pas le téléchargement automatique ici, car après avoir sélectionné le fichier, je dois le télécharger sur l'interface utilisateur. Faites quelques choses, puis je spécifierai manuellement pour commencer le téléchargement.

La configuration doit prêter attention aux attributs ci-dessus. Il existe de nombreux autres attributs, dont certains ont été commentés dans le js ci-dessus. Pour d'autres qui ne sont pas inclus, veuillez vous référer à la documentation officielle de WebUploader.

Écoutez les événements webuploader

Après avoir configuré ce qui précède, vous pouvez voir votre bouton de téléchargement sur la page, mais ce qui précède n'est pas le sujet. La clé pour utiliser webuploader de manière flexible est de gérer une série d'événements déclenchés lorsque webuploader télécharge des images. Selon nos exigences commerciales, j'ai principalement surveillé les événements suivants :

    //当有一批文件加载进队列时触发事件
    uploader.on("filesQueued", webFilesQueued);
    //当有一批文件加载进队列时触发事件
    //uploader.on("fileQueued", webFilesQueued);
    //单个文件开始上传
    uploader.on("uploadStart", uploadStart);
    //单个文件上传成功
    uploader.on("uploadSuccess", uploadSuccess);
    //单个文件上传过程中
    uploader.on("uploadProgress", uploadProgress);
    //所有文件上传结束
    uploader.on("uploadFinished", uploadComplete);
    //图片校验不通过时
    uploader.on("error", webFileQueueError);
    //上传出错时
    uploader.on("uploadError",webUploadError);

webuploader sélectionnera le fichier que vous avez sélectionné via la boîte de dialogue de fichier. L'image (peut être une ou plusieurs images) est ajoutée à une file d'attente, puis tous les fichiers de la file d'attente sont téléchargés (notez que si le thread que vous configurez est supérieur à 1, webuploader prend en charge le téléchargement multithread).

filesQueued Cet événement est déclenché lorsqu'un lot de fichiers est chargé dans la file d'attente. À ce moment, le téléchargement des fichiers n'a pas encore commencé. Vous pouvez exécuter une logique métier. Par exemple, je dois déterminer combien d'images ont été téléchargées cette fois-ci, puis générer dynamiquement autant de zones d'image sur la page. Après avoir exécuté la logique métier, je dois spécifier manuellement de démarrer le téléchargement (car j'ai configuré auto: false) et d'exécuter loader.startUpload() (si le téléchargement est automatique, il n'est pas nécessaire d'exécuter manuellement cette méthode), puis tout le les images dans la file d'attente à ce moment-là le seront. Le téléchargement a commencé.

fileQueued est similaire à filesQueued, mais il s'agit d'un événement déclenché lorsqu'un seul fichier est mis en file d'attente. Cet événement sera déclenché plusieurs fois lorsque plusieurs images sont sélectionnées en même temps.

uploadStart Événement déclenché lorsqu'un seul fichier commence à être téléchargé.

uploadProgress est un événement déclenché lors du téléchargement d'un seul fichier. Dans la méthode de rappel, vous pouvez recevoir le pourcentage de téléchargement. En utilisant ce pourcentage, nous pouvons afficher dynamiquement la barre de progression du téléchargement.

uploadSuccess 单个文件上传成功触发的事件，在回调方法内你可以接收到服务器端返回的数据以及当前是哪个file对象上传成功，目测通过file对象可以获取到图片的缩略图对象（webuploader前端帮我们生成的），可以在UI上显示缩略图等等逻辑（根据自己的业务要求决定。。。。）。

function uploadSuccess(file, serverData) {
    doSomeThing();
}

uploadFinished 队列中所有文件上传成功时触发的事件，具体回调方法视业务逻辑决定。

error 图片在加入队列之前会进行校验，看大小、格式等等是否满足配置要求，校验不通过触发的事件，你可以在UI上弹窗提示用户

uploadError 这里图片校验通过，加入了队列，并且开始上传到服务器，如果服务器或者网络有问题导致出错触发的事件，可以提示用户上传不成功。

三、一些杂项

按照以上方法应该一般的上传问题都可以解决，不过这次替换过程中还遇到一些问题，记录如下：

上传总数量限制

在前端我们有总数量的限制，但是配置时fileNumLimit：10属性指的并不是总数量10张，而是该次对话框你选择的文件数量，如果文件对话框内你选了12张，那么webuploader也会上传10张，但是后面的两张会丢弃掉。如果想对总数量限制一种方法是修改webuploader.js的源码：

 uploader.on( 'beforeFileQueued', function( file ) {
                //实时获得上传限制的文件总数
                max = this.options.fileNumLimit;
                if ( count >= max && flag ) {
                    flag = false;
                    this.trigger( 'error', 'Q_EXCEED_NUM_LIMIT', max, file );
                    setTimeout(function() {
                        flag = true;
                    }, 1 );
                }
                return count >= max ? false : true;
            });
    
            uploader.on( 'fileQueued', function() {
                count++;
            });
    
            uploader.on( 'fileDequeued', function() {
                count--;
            });
    
            uploader.on( 'uploadFinished', function() {
                //count = 0; 限制总数量，而不是限制一次的文件数量
            });

数量校验结束后count会清0，把这个注释掉（上面js倒数第二行被注释的代码）那么fileNumLimit就是总数量了。

还有一种方法是webuploader会记录上传成功的文件数，自己拿到这个数来进行判断就行了。

chrome浏览器不能连续选择相同图片

连续上传同一图片时在chrome浏览器上总是不触发入队的事件，刚开始以为是配置的duplicate属性是false，后来发现duplicate属性是正确的true。这是chrome的特性，选择文件对话框关闭的时候会将input标签的value属性设置为这张图片的hash值？，如果input已经有了value属性（上一张图片的），并且和这一张的相同，那么将不触发change事件，也就是不上传了。解决方法：

function uploadComplete(file) {
        //解决chrome浏览器不能连续两次上传相同图片的bug k----------
        if ($("uploadImageDiv").select("input").length > 0) {
            $("uploadImageDiv").select("input")[0].value = "";
        }
        //解决chrome浏览器不能连续两次上传相同图片的bug k----------
}

监听上传完成事件，把input标签的value设为空就行了。

推荐教程：《JS教程》

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!