Webuploaderファイルのアップロードコンポーネントは、元のフラッシュランタイムを使用して、主流のIEブラウザを放棄することはなく、IE6+、iOS 6+、Android 4+と互換性がありますが、最新のブラウザでHTML5の利点を完全に利用できます。実行時間の2つのセット、同じコールメソッドは、ユーザーが自由に選択できます。大きなファイルフラグメンテーションの同時アップロードを使用すると、ファイルアップロードの効率が大幅に向上します。
1。関数の紹介
シャード、並行性
シャードと並行性を組み合わせて、大きなファイルを複数のブロックに分割し、同時にアップロードし、大きなファイルのアップロード速度を大幅に改善します。
ネットワークの問題が送信エラーを引き起こす場合、ファイル全体ではなく、エラーシャードを再送信するだけです。さらに、シャードトランスミッションは、リアルタイムでアップロードの進行を追跡できます。
プレビュー、圧縮
一般的な画像形式JPG、JPEG、GIF、BMP、PNGプレビュー、および圧縮をサポートして、ネットワークデータ送信を保存します。
JPEGのメタ情報を分析し、さまざまな方向を正しく処理します。同時に、圧縮後、画像のすべての元のメタデータをアップロードして保持します。
複数のチャネルを介してファイルを追加します
複数のファイルの選択、タイプフィルタリング、ドラッグアンドドロップ（ファイルとフォルダー）、および画像貼り付け機能をサポートします。
ペースト関数は、主にクリップボードに画像データがある場合（QQ（CTRL + ALT + A）などのスクリーンショットツールが、Webページの画像を右クリックして[コピー]をクリックすることができるという事実に反映されています。
html5＆flash
主流のブラウザー、一貫したインターフェイス、および2つのランタイムサポートセットを実装するため、ユーザーは内部で使用される穀物を気にする必要はありません。
同時に、Flash部品はUI関連の作業を行いません。これは、Flashの拡張とカスタムビジネスニーズを気にしないユーザーにとって便利です。
MD5秒パス
ファイルサイズが大きく、数量が比較的大きい場合、アップロードする前にファイルMD5値の確認をサポートします。一貫している場合は、直接スキップできます。
サーバーとフロントエンドがアルゴリズムを均一に変更し、セグメントMD5を取得すると、検証パフォーマンスを大幅に改善し、約20ミリ秒かかります。
拡張しやすく、取り外しやすい
取り外し可能なメカニズムは、関数をウィジェットに分離するために採用され、自由に一致させることができます。
このコードはAMD仕様を使用して編成されており、明確で明確で、上級者が拡張するのに便利です。
リソースを紹介します
Webアップローダーを使用してファイルをアップロードするには、JS、CSS、SWFの3つのリソースを導入する必要があります。
<！ - cssの紹介 - > <link rel = "styleSheet" type = "text/css" href = "webuploaderフォルダー/webuploader.css"> <！ - JSの紹介 - > <テキスト/javascript "src =" webuploader folder/web fold.js ">後で表示されます - >
2。ファイルアップロード
Webuploaderには、ファイルアップロードの基礎となる実装のみが含まれており、UIパーツは含まれていません。したがって、インタラクティブな側面を自由に再生できます。以下は、簡単なバージョンを実装する方法を示します。
HTMLパーツ
まず、ファイル情報、選択ボタン、アップロードボタンを保存するコンテナの3つの部分を含むDOM構造を準備します。
<div id = "uploader"> <！ - ファイル情報を保存するために使用 - > <div id = "thelist"> </div> <div> <div id = "picker"> select file </div> <button id = "ctlbtn"> button> </div> </div>
Webアップローダーを初期化します
詳細については、コードのコメントセクションをご覧ください。
var uploader = webuploader.create（{// swfファイルパスswf：base_url + '/js/uploader.swf'、//ファイル受信サーバー。サーバー： 'http://webuploader.duapp.com/server/fileupload.phpまたはフラッシュ：「#picker」、//デフォルトはjpegである場合は、sezize：false}）;ユーザーの選択を表示します
WebuploaderはUIロジックを処理しないため、Filequeuedイベントを聴くためにそれを実装する必要があります。
// Queue uploader.on（ 'filequeued'、function（file）{$ list.append（ '<div id = "' + file.id + '">' + '<h4>' + file.name + '</h4>' + '<p> upload ... </p>' + '</div>'）;}）;ファイルのアップロード進行状況
ファイルがアップロードされると、Web Uploaderは、ファイルオブジェクトとファイルの現在のアップロード進行を含むUploadProgressイベントを送信します。
//ファイルアップロード中にリアルタイムで表示する進行状況バーを作成します。 uploader.on（ 'uploadprogress'、function（file、percerentage）{var $ li = $（ '＃' + file.id）、$ = $ li.find（ '。progress .progress-bar'）; // if（！$パーセント。 '</div>'）。ファイルの成功と失敗処理
ファイルのアップロードが失敗した場合、uploadErrorイベントが送信され、ファイルが正常にアップロードされた場合、uploadsuccessイベントが送信されます。成功や失敗に関係なく、ファイルがアップロードされた後にUploadCompleteイベントがトリガーされます。
uploader.on（ 'uploadsuccess'、function（file）{$（ '＃'+file.id）.find（ 'p.state'）。テキスト（ 'uploaded'）;}）; function（ 'uploaderror'、function（file）{$（ '＃'+file.id）.find（ 'p.State'）; 'uploadComplete'、function（file）{$（ '＃'+file.id）.find（ '。progress'）。fadeout（）;}）;3。写真をアップロードします
通常のファイルアップロードと比較して、このデモは、ファイルフィルタリング、画像プレビュー、画像圧縮アップロード、その他の機能を示しています。
HTML
上記のようにデモを実装するには、最初に追加されたファイル情報リストを保存するためにボタンとコンテナを準備する必要があります。
<！ - dom structure part-> <div id = "uploader-demo"> <！ - アイテムの保存に使用 - > <div id = "filelist"> </div> <div id = "filepicker">写真</div> </div>
JavaScript
Web Uploaderインスタンスを作成します
// web uploadervar uploader = webuploader.create（{//ファイルを選択した後に自動的にアップロードするかどうか。 // [ファイル]ボタンを選択します。filequeuedイベントを聞いて、uploader.makeThumbを使用して画像プレビューを作成します。
PS：ここで入手するのはデータURLデータで、IE6とIE7は直接プレビューをサポートしていません。プレビューは、フラッシュまたはサーバーで完了できます。
// fileが追加された場合、uploader.on（ 'filequeued'、function（file）{var $ li = $（ '<div id = "' + file.id + '">' + '<img>' + '<div>' + file.name + '</div>' + ' +' </div> '）、$ img = $ li.find（' img '）; $ li）; //非画像ファイルの場合、この方法を呼び出す必要はありません。 'src'、src）;残りはアップロードステータスプロンプトです。ファイルアップロードプロセスがアップロードされると、アップロードが成功し、アップロードが失敗し、アップロードが完了すると、UploadProgress、UploadSuccess、UploadError、およびUploadCompleteイベントがそれぞれUploadProgress、UploadSucass、UploadError、UploadCompleteイベントに対応しています。
//ファイルアップロード中にリアルタイムで表示する進行状況バーを作成します。 uploader.on（ 'uploadprogress'、function（file、percerentage）{var $ li = $（ '＃'+file.id）、$ percerate = $ li.find（'。proshingspan '）; //繰り返し作成を回避するif（！$ percent.lenge） $ percent.css（ 'width'、percentage * 100 + '％'）;}）; //ファイルは正常にアップロードされ、アイテムに成功したクラスを追加し、スタイルでアップロードをマークします。 uploader.on（ 'uploadsuccess'、function（file）{$（ '＃'+file.id）.addclass（ 'upload-state-done'）;}）; //ファイルアップロードが故障し、アップロードエラーが表示されました。 uploader.on（ 'uploaderror'、function（file）{var $ li = $（ '＃'+file.id）、$ error = $ li.find（ 'div.error'）; //繰り返し作成を避けるif（！$ error.length）{$ error = $（ '<div> </div>'）。完了し、成功または失敗し、最初に進行状況バーを削除します。 uploader.on（ 'uploadcomplete'、function（file）{$（ '＃'+file.id）.find（ '。progress'）。remove（）;}）;上記は、Web Uploaderファイルアップロードプラグインを使用する方法の紹介です。みんなの学習に役立つことを願っています。