首頁  >  文章  >  web前端  >  文件上傳元件WebUploader基本使用

文件上傳元件WebUploader基本使用

Guanhui
Guanhui轉載
2020-05-08 09:21:565775瀏覽

一、緣起

公司網站社群有圖片上傳功能,由於網站已經有些年頭了,當時上傳的時候根據客戶端支不支援flash而分為兩種邏輯。如果支援flash就使用SWFuploader這個上傳元件進行檔案上傳,這種使用者體驗較好。如果不支援flash則使用普通的input標籤進行上傳,這種方式功能就不全,體驗不好。但由於現在chrome瀏覽器預設不支援flash,導致大部分時候使用者都使用input標籤上傳,上傳體驗不好,所以決定使用百度的webuploader上傳元件來取代原有的上傳元件。在替換過程中發現一些問題,把需要注意的地方記錄下來。

二、WebUploader使用注意

其實第三方的js外掛一般用法都差不多,基本上都是導入資源檔、依照配置初始化外掛物件、使用物件的方法或監聽事件完成特定的功能,webuploader也差不多。

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>

需要匯入wepuploader的css檔案、jquery.js以及webuploader.js檔案。

css文件就是webuploader幫你產生的上傳按鈕的樣式文件,如果你對預設的樣式不滿意,一是可以自行修改該css來達到你的要求。另一種方法就是準備好自己的css文件,然後修改webuploader.js的源代碼,然後指定按鈕的class、mouseenter、mouseleave時的class等。 webuploader.js程式碼位置如下:

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

由於webuploader是基於jquery的,所以需要導入jquery.js,並且jquery版本要大於1.10。坑爹的是由於網站老舊,所以之前使用的是prototype.js來進行各種操作。為了將$使用權交給prototype,也要jQuery.noConflict(),當然一般不需要這個運算囉。

這裡我使用的webuploader.js的版本是0.1.2,之前我曾經使用0.1.5 。但是0.1.5在進行flash上​​傳時,如果伺服器端回傳的不是一個json格式的字串,webuploader.js程式碼將會報錯,客戶端接收不到回傳訊息。而我們伺服器回傳的就是一個普通字串,所以沒有辦法,只能使用0.1.2。

初始化webuploader物件

在初始化物件之前,因為上傳按鈕是webuploader自己幫你產生的,所以首先準備上傳按鈕的父標籤,webuploader將在該標籤內產生上傳標籤,可以是div、span等等。我使用的就是span:

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

然後就可以初始化webuploader物件了,js程式碼如下:

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

WebUploader.create()方法生成webuploader物件(貌似還有其他方法生成,不過這不是重點),傳入配置的物件就ok了

server屬性指定檔案上傳的伺服器位址。

pick屬性指定上傳按鈕,id透過jquery的選擇器指定哪個按鈕(不一定要是#的id選擇器)

swf屬性指定啟用flash時到哪裡載入swf檔( webuploader內部相容flash和h5,我們不需要關注它使用哪種方式)

auto 選完檔案後,是否自動上傳,這裡我沒用自動上傳,因為選完檔案後我需要在UI上做一些操作,之後我會手動指定開始上傳。

設定要注意的就是以上幾個屬性,其它的屬性還有很多,有一些已經在上面的js裡面註釋,另外沒有囊括的可以參考WebUploader官方文件。

監聽webuploader事件

進行以上設定之後你就可以在頁面上看到你的上傳按鈕了,但是上面的其實並不是重點。靈活使用webuploader的關鍵是對webuploader上傳圖片過程中觸發的一系列事件的處理,根據我們的業務要求我主要監聽了以下的事件:

    //当有一批文件加载进队列时触发事件
    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會將你透過檔案對話框選擇的圖片(可以是一張,可以是多張圖片)加入到一個佇列中,然後將該佇列中所有的檔案上傳(注意如果你設定的thread大於1的話webuploader是支援多執行緒上傳的)。

filesQueued 當有一批檔案載入進佇列時觸發的事件,此時​​檔案還沒開始上傳。你可以執行一些商業邏輯,例如我就需要判斷這次上傳了多少張圖片,然後在頁面上動態產生這麼多圖片框。執行完業務邏輯之後我需要手動指定開始上傳(因為我配置的是auto: false)執行ploader.startUpload()(如果自動上傳就不需要手動執行該方法),那麼此時在隊列中的所有圖片就開始上傳了。

fileQueued 和filesQueued差不多,但是這是單一文件入隊時觸發的事件,一次選擇多個圖片時會多次觸發該事件。

uploadStart 單一檔案開始上傳時觸發的事件。

uploadProgress 單一檔案上傳過程中觸發的事件,在回呼方法內你可以接收到的上傳的百分比,利用這個百分比我們可以動態的顯示上傳進度條。

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

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

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

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

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

三、一些杂项

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

上传总数量限制

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

 uploader.on( &#39;beforeFileQueued&#39;, function( file ) {
                //实时获得上传限制的文件总数
                max = this.options.fileNumLimit;
                if ( count >= max && flag ) {
                    flag = false;
                    this.trigger( &#39;error&#39;, &#39;Q_EXCEED_NUM_LIMIT&#39;, max, file );
                    setTimeout(function() {
                        flag = true;
                    }, 1 );
                }
                return count >= max ? false : true;
            });
    
            uploader.on( &#39;fileQueued&#39;, function() {
                count++;
            });
    
            uploader.on( &#39;fileDequeued&#39;, function() {
                count--;
            });
    
            uploader.on( &#39;uploadFinished&#39;, 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教程

以上是文件上傳元件WebUploader基本使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:jianshu.com。如有侵權,請聯絡admin@php.cn刪除