ファイルアップロードコンポーネント WebUploader の基本的な使用方法

1. 起源

同社の Web サイト コミュニティには写真のアップロード機能があり、Web サイトが開設されてから数年が経過しているため、アップロード プロセスは次のカテゴリに基づいて分類されていました。クライアントがフラッシュをサポートしているかどうか 2 種類のロジック。 Flash がサポートされている場合は、SWFuploader アップロード コンポーネントを使用してファイルをアップロードすると、ユーザー エクスペリエンスが向上します。 Flash がサポートされていない場合は、通常の input タグを使用してアップロードしてください。この方法は機能が不完全で、エクスペリエンスが劣ります。ただし、Chrome ブラウザはデフォルトで Flash をサポートしていないため、ほとんどの場合、ユーザーはアップロードに入力タグを使用し、アップロードのエクスペリエンスが良くないため、元のアップロード コンポーネントを置き換えるために Baidu の webuploader アップロード コンポーネントを使用することにしました。交換プロセス中に問題が見つかった場合は、注意が必要な領域を記録します。

2. 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のソースコードを修正し、ボタンのクラスやmouseenter、mouseleaveクラスなどを指定する方法もあります。 webuploader.js コードの場所は次のとおりです。

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

webuploader は jquery に基づいているため、jquery.js をインポートする必要があり、jquery のバージョンは 1.10 以降である必要があります。コツは、Web サイトが古いため、以前はprototype.js を使用してさまざまな操作を実行していたことです。 $ の使用権をプロトタイプに移すためには jQuery.noConflict() も必要ですが、もちろん通常はこの操作は必要ありません。

ここで使用する webuploader.js のバージョンは 0.1.2 ですが、以前は 0.1.5 を使用していました。ただし、0.1.5 でフラッシュ アップロードを実行する場合、サーバーが 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: '../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,
    });

WebUploader.create() メソッドは、webuploader オブジェクトを生成します (生成する他の方法もありますが、これは重要ではありません)、構成オブジェクトを渡すだけです。

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 は、選択したファイルを選択しますファイル ダイアログ ボックス 画像 (1 つまたは複数の画像) がキューに追加され、キュー内のすべてのファイルがアップロードされます (設定したスレッドが 1 より大きい場合、webuploader はマルチスレッド アップロードをサポートしていることに注意してください)。

filesQueued このイベントは、ファイルのバッチがキューに読み込まれるときにトリガーされますが、この時点では、ファイルのアップロードはまだ開始されていません。いくつかのビジネス ロジックを実行できます。たとえば、今回アップロードされた写真の数を特定し、ページ上に非常に多くの写真ボックスを動的に生成する必要があります。ビジネス ロジックを実行した後、手動でアップロードの開始を指定し (auto: false を設定したため)、loader.startUpload() を実行する必要があります (自動的にアップロードされる場合は、このメソッドを手動で実行する必要はありません)。この時点でキュー内の写真はアップロードが開始されました。

fileQueued は filesQueued に似ていますが、これは 1 つのファイルがキューに入れられたときにトリガーされるイベントであり、複数の画像が一度に選択されると、このイベントは複数回トリガーされます。

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

以上がファイルアップロードコンポーネント WebUploader の基本的な使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。