ファイルアップロードのいくつかの方法——webuploader編

もともとこのいくつかの方法を同じ編に置いて書きたいと思っていましたが、xhrを書き終わったら、もう長いので、別れたほうがいいと思います.WebuploaderはBaidu WebFE(FEX)チームが開発した簡単なHTML 5を主とし、FLASHを補助とする現代ファイルアップロードコンポーネントである.その互換性はよく、IE 6+、IOS 6+、Android 4+と互換性があります.作ったシステムはすべてIE 8と互換性があるため、webloaderを使う前に、いくつかのコンポーネントを交換して、すべて需要を満たすことができなくて、例えばuploadifyはheaderの中でtokenを追加することができなくて(需要は実はとても簡単で、勝手にコンポーネントを持って使うことができなくて、私はとても絶望しています)、実は最初からwebloaderを使ってみましたが、あるウェブサイトのdemoの中のjsファイルに問題があるため、(当时のプロジェクトは急いで、焦って、放弃して、后でライオンに闻いて、ライオンもwebuploaderを使って、私はホームページを走ってダウンロードして、いいです!)やはり公式サイトが頼りになります!ちなみに、webuploaderというプロジェクトでは、ファイルアップロードは自分のサーバーにアップロードされ、七牛アップロードではありません.
まずコードをつけて、このコードはプロジェクトの中で使う前に、1つの小さいdemoを書いて、パラメータはそろっていません...(webuploaderは使いやすいし、apiも詳しいので、公式サイトで見れば上手になります)

(function () {
    var uploader = WebUploader.create({

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

        //        。
        server: 'uploadify.php', //    demo，   uploadify php    

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

        //    image,      jpeg，             ！
        resize: false,
        auto: true,
        headers: {'userName': 'emi', 'token': '123456'}
    });
//              ，       
    uploader.on( 'fileQueued', function( file ) {
        $('#thelist').append( '
' +
            '
' + file.name + '
' +
            '
    ...
' +
            '
' );
    });
//                 。
    uploader.on( 'uploadProgress', function( file, percentage ) {
        var $li = $( '#'+file.id ),
            $percent = $li.find('.progress .progress-bar');

        //       
        if ( !$percent.length ) {
            $percent = $('
' +
                '
' +
                '
' +
                '
').appendTo( $li ).find('.progress-bar');
        }

        $li.find('p.state').text('   ');

        $percent.css( 'width', percentage * 100 + '%' );
    });
    uploader.on( 'uploadSuccess', function( file ) {
        $( '#'+file.id ).find('p.state').text('   ');
    });

    uploader.on( 'uploadError', function( file ) {
        $( '#'+file.id ).find('p.state').text('    ');
    });

    uploader.on( 'uploadComplete', function( file ) {
        $( '#'+file.id ).find('.progress').fadeOut();
    });
})();

プロジェクトの の で、 も1つのとても な に って( のコードの でこのパラメータがありませんが、このパラメータはどのタイプのファイルを け れることを します)、フォルダの きがとても くて、ネット で しました

accept: {
  title: 'Images',
  extensions: 'jpg,jpeg,png',
  mimeTypes: 'image/*'
}

これに すればいいので、 ~

accept: {
  title: 'Images',
  extensions: 'jpg,jpeg,png',
  mimeTypes: 'image/jpg,image/jpeg,image/png'   //    
}

uploadオブジェクトでパラメータ を できます. えばuploader.options.server='サーバパス'です.アップロードイベントを き えることもできます.
アップロードしなければupoloader.upload()トリガ.
Webuploaderは に で、 の もないような がします. に も できない.