Web Uploaderプロジェクトの実戦で出会った多くの穴

WebUploaderはBaidu WebFE(FEX)チームが開発した簡単なHTML 5を主とし、FLASHを補助とする現代ファイルアップロードコンポーネントで、使いやすく、互換性も良い.公式文書はくだらないことは言わないで、プロジェクトで出会ったいろいろな穴を直接議論しましょう.
1.htmlページに未知の場所で画像をアップロードする必要があります.

var uploader = WebUploader.create({

    // swf    
    swf: BASE_URL + '/js/Uploader.swf',

    //        。
    server: 'http://webuploader.duapp.com/server/fileupload.php',

    //        。  。
    //            ，   input  ，    flash.
    pick: '#picker',

    //    image,      jpeg，             ！
    resize: false
});

公式ドキュメント初期化uploaderオブジェクトはこうです.pickerはページ上でアップロードコンポーネントを呼び出すIdです.1~3個あれば、上のコードを3回書くことができるかもしれません.面倒ではありませんが、10個ぶつかると、泣きたくなります.その後、次の方法を考えて、uploaderオブジェクトを再インスタンス化します.アップロードコンポーネントを呼び出す必要があるコントロールIdを渡す.

function uploader(domId){

    // swf    
    swf: BASE_URL + '/js/Uploader.swf',

    //        。
    server: 'http://webuploader.duapp.com/server/fileupload.php',

    //        。  。
    //            ，   input  ，    flash.
    pick: '#'+domId,

    //    image,      jpeg，             ！
    resize: false

    return uploader;
}

アップロードする必要があるコントロールが動的に生成されている場合は、コントロールIdのプロパティを乱数で設定できます.

 uploader("_upload_button_"+randomNum);

randomNumは乱数です.これで、ページにアップロードするコントロールがいくつあっても、アップロード画像のコンポーネントを呼び出すことができます.
2.file QueuedとfilesQueuedイベントの違い
アップロードされた画像が1つのキューに入っている場合、fileQueuedイベントは画像がキューに追加されるたびに実行されます.このイベントでは、画像の数の重ね合わせ、画像サムネイルhtmlのつなぎ合わせを処理することができます.filesQueuedは画像選択後に実行され、このイベントでは前につなぎ合わせたHtmlを何らかの形で展示することができ、私がプロジェクトで使用しているのはartDialog弾枠コンポーネントで、ドキュメントリンクを参照しています.
3.アップロードキューから画像を削除
やっと選択画像、画像のアップロードができました.この時、製品が来て、アップロードする画像の列の中の画像は、選択的な削除をサポートする必要があります.この場合、fileDequeuedイベントを呼び出すことができます.

 uploader.on('fileDequeued', function(file){

        fileCount--;
        removeFile(file);

    });

4.アップロード待ちの画像キューで画像アップロードの再選択をサポート
もしあなたが何枚かの画像を選んでアップロードを待っているか、あるいはすでに何枚かアップロードし終わった場合、弾窓コンポーネントを閉じない前提の下で、引き続き画像アップロードを追加したい場合は、次のコードを呼び出すことができます.

//   “    ”   ，
   uploader.addButton({
         id: '#continueUpload',
         label: '    '
     });

  id             id，    ，             。