Grundlegende Verwendung der Datei-Upload-Komponente WebUploader

1. Herkunft

Die Website-Community verfügt über eine Bild-Upload-Funktion, daher wurde der Upload in Kategorien unterteilt Der Client unterstützt Flash oder nicht. Wenn Flash unterstützt wird, verwenden Sie die SWFuploader-Upload-Komponente zum Hochladen von Dateien. Dies bietet eine bessere Benutzererfahrung. Wenn Flash nicht unterstützt wird, verwenden Sie zum Hochladen normale Eingabe-Tags. Diese Methode weist unvollständige Funktionen und eine schlechte Erfahrung auf. Da der Chrome-Browser jedoch standardmäßig kein Flash unterstützt, verwenden Benutzer zum Hochladen meistens Eingabe-Tags und das Upload-Erlebnis ist nicht gut. Daher haben wir uns entschieden, die Webuploader-Upload-Komponente von Baidu zu verwenden, um die ursprüngliche Upload-Komponente zu ersetzen. Wenn Sie während des Austauschvorgangs Probleme feststellen, notieren Sie die Bereiche, die Ihrer Aufmerksamkeit bedürfen.

2. Hinweise zur Verwendung von WebUploader

Tatsächlich werden JS-Plug-Ins von Drittanbietern grundsätzlich auf die gleiche Weise verwendet. Sie importieren Ressourcendateien und initialisieren Plug-Ins -in-Objekte entsprechend der Konfiguration und Verwendungsmethoden oder Listening-Ereignisse vervollständigen bestimmte Funktionen, und Webuploader ist ähnlich.

JS-Importressourcendatei

<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>

Sie müssen die CSS-Datei, die Dateien jquery.js und webuploader.js von wepuploader importieren.

Die CSS-Datei ist die vom Webuploader für Sie generierte Stildatei des Upload-Buttons. Wenn Sie mit dem Standardstil nicht zufrieden sind, können Sie das CSS zunächst selbst an Ihre Anforderungen anpassen. Eine andere Methode besteht darin, Ihre eigene CSS-Datei vorzubereiten, dann den Quellcode von webuploader.js zu ändern und dann die Klasse der Schaltfläche, der Mouseenter-Klasse, der Mouseleave-Klasse usw. anzugeben. Der Codespeicherort von webuploader.js lautet wie folgt:

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;
                    }
                })

Da webuploader auf jquery basiert, muss jquery.js importiert werden und die jquery-Version muss größer als 1.10 sein. Der Trick besteht darin, dass, weil die Website alt ist, bereits zuvor „prototype.js“ zur Ausführung verschiedener Vorgänge verwendet wurde. Um $-Nutzungsrechte an den Prototyp zu übertragen, ist auch jQuery.noConflict() erforderlich. Natürlich ist dieser Vorgang im Allgemeinen nicht erforderlich.

Die Version von webuploader.js, die ich hier verwende, ist 0.1.2, ich habe zuvor 0.1.5 verwendet. Wenn der Server jedoch beim Flash-Upload in 0.1.5 keine Zeichenfolge im JSON-Format zurückgibt, meldet der Code webuploader.js einen Fehler und der Client erhält die Rückgabeinformationen nicht. Was unser Server zurückgibt, ist eine gewöhnliche Zeichenfolge, daher gibt es keine andere Möglichkeit, als 0.1.2 zu verwenden.

Initialisieren Sie das Webuploader-Objekt

Da die Upload-Schaltfläche vom Webuploader selbst generiert wird, bereiten Sie vor dem Initialisieren des Objekts zunächst das übergeordnete Tag der Upload-Schaltfläche vor, und der Webuploader generiert das Upload-Tag innerhalb des Objekts Tag. Es kann div, span usw. sein. Was ich verwende, ist span:

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

Dann kann ich das Webuploader-Objekt initialisieren. Der js-Code lautet wie folgt:

    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,
    });

Die WebUploader.create()-Methode generiert das Webuploader-Objekt (anscheinend). Es gibt andere Methoden, um es zu generieren, aber das ist nicht der Punkt.) Übergeben Sie einfach das Konfigurationsobjekt

Das Serverattribut gibt die Serveradresse für den Datei-Upload an.

Das Pick-Attribut gibt die Schaltfläche zum Hochladen an, und die ID gibt an, welche Schaltfläche über den Selektor von jquery verwendet werden soll (es muss nicht der ID-Selektor von # sein).

Das SWF-Attribut gibt an, wo die SWF-Datei geladen werden soll Datei, wenn Flash aktiviert ist (Webuploader ist intern mit Flash und h5 kompatibel, wir müssen nicht darauf achten, welche Methode er verwendet)

auto Nachdem ich die Datei ausgewählt habe, ob sie automatisch hochgeladen werden soll, weiß ich nicht Ich verwende hier keinen automatischen Upload, da ich die Datei nach der Auswahl auf der Benutzeroberfläche hochladen muss. Führen Sie ein paar Dinge aus und geben Sie dann manuell an, dass mit dem Hochladen begonnen werden soll.

Bei der Konfiguration müssen die oben genannten Attribute beachtet werden, von denen einige in den obigen js kommentiert wurden. Weitere Informationen finden Sie in der offiziellen WebUploader-Dokumentation.

Webuploader-Ereignisse anhören

Nachdem Sie die oben genannten Einstellungen konfiguriert haben, können Sie Ihre Upload-Schaltfläche auf der Seite sehen, aber das oben Genannte ist nicht der Punkt. Der Schlüssel zur flexiblen Verwendung von Webuploader liegt in der Handhabung einer Reihe von Ereignissen, die ausgelöst werden, wenn Webuploader Bilder hochlädt. Gemäß unseren Geschäftsanforderungen habe ich hauptsächlich die folgenden Ereignisse überwacht:

    //当有一批文件加载进队列时触发事件
    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 wählt die von Ihnen ausgewählte Datei über den Dateidialog aus Das Bild (kann ein oder mehrere Bilder sein) wird einer Warteschlange hinzugefügt und dann werden alle Dateien in der Warteschlange hochgeladen (beachten Sie, dass der Webuploader Multithread-Upload unterstützt, wenn der von Ihnen konfigurierte Thread größer als 1 ist).

filesQueued Dieses Ereignis wird ausgelöst, wenn ein Stapel Dateien in die Warteschlange geladen wird. Zu diesem Zeitpunkt wurde noch nicht mit dem Hochladen der Dateien begonnen. Sie können eine Geschäftslogik ausführen. Ich muss beispielsweise ermitteln, wie viele Bilder dieses Mal hochgeladen wurden, und dann dynamisch so viele Bildfelder auf der Seite generieren. Nach dem Ausführen der Geschäftslogik muss ich manuell angeben, dass der Upload gestartet werden soll (da ich „auto: false“ konfiguriert habe) und „loader.startUpload()“ ausführen (wenn der Upload automatisch erfolgt, muss diese Methode nicht manuell ausgeführt werden), dann alles Bilder in der Warteschlange werden zu diesem Zeitpunkt angezeigt. Der Upload wurde gestartet.

fileQueued ähnelt filesQueued, aber dies ist ein Ereignis, das ausgelöst wird, wenn eine einzelne Datei in die Warteschlange gestellt wird. Dieses Ereignis wird mehrmals ausgelöst, wenn mehrere Bilder gleichzeitig ausgewählt werden.

uploadStart-Ereignis, das ausgelöst wird, wenn mit dem Hochladen einer einzelnen Datei begonnen wird.

uploadProgress ist ein Ereignis, das während eines einzelnen Datei-Upload-Vorgangs ausgelöst wird. In der Callback-Methode können Sie den Prozentsatz des Uploads erhalten. Mit diesem Prozentsatz können wir den Upload-Fortschrittsbalken dynamisch anzeigen.

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教程》

Das obige ist der detaillierte Inhalt vonGrundlegende Verwendung der Datei-Upload-Komponente WebUploader. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!