一、百度文档
`` `HTMLの
<！DOCTYPE HTML>
<HTML LANG = "EN">
<HEAD>
<メタ文字コード= "UTF-8">
<タイトル>タイトル</ TITLE>
<リンクのrel = "スタイルシート"タイプ= "テキスト/ cssの"のhref = "./ webuploader.css ">
ます。<script type =" text / javascriptの" SRC = "./ jquery.js "> </ SCRIPT>
ます。<script type =" text / javascriptの" SRC = "./webuploader.js "> </ SCRIPT>
</ HEAD>
<BODY>
の<divのid ="アップローダー"クラス= "WU-例">
<！ -用来存放文件信息- >
<div要素のid = "thelist"クラス= "アップローダーリスト"> </ div>
<divのクラス=」btns ">
<ピッカー"> </ div>のファイルを選択してくださいDIV上記のid =述べた"
開始アップロード</ボタン> - > - ctlBtn "クラス=" BTN BTN-デフォルト「！<上記のid =述べたボタン<">
</ DIV>を
</ div>
</ BODY>
//あなたがスライスしたい場合は、どのくらいの分？デフォルトのサイズは5Mです。
CHUNKSIZE：* 1024 1024 * 20、
//画像を圧縮していない、それは事前に圧縮されたJPEGの場合は、デフォルトのファイルをアップロードしてアップロードします！
リサイズ：falseに
）};
//すべてのファイルがキューに追加されている場合
uploader.on（ 'fileQueued'、機能（ファイル）{
はconsole.log（file.id）;
はconsole.log（file.name）;
$一覧.append（ '<DIV ID = "' + file.id + '"クラス= "項目">' +
'<H4クラス= "情報">' + file.name + '</ H4>' +
'<Pクラス= "状態">割合</ P> '+
' </ div>「）;
}）;
リアルタイム表示処理をアップロードプログレスバー//ファイルを作成します。
uploader.on（ 'uploadprogressの'
変数$パーセント= $のdiv.find（ '.progressバーを進めます。'）;
//避免重复创建
場合（！$のpercent.length）{
$パーセント= $のdiv.append（ '<DIV CLASS = "進捗進捗ストライプアクティブ">' +
「<DIV CLASS = "プログレスバー"ロール=」プログレスバー」スタイル= "幅：0％"> '+
'</ div>の' +
'</ DIV>）プログレスバーを''）（見つけます。';。
}
$のdiv.find（ 'p.state'）テキスト（ '上传中'）。
$のpercent.css（ '幅'、割合* 100 + '％'）;
}）;
uploader.on（ 'uploadSuccess'、
uploader.on（ 'uploadError'、関数（ファイル）{
$（ '＃' + file.id）.find（ 'p.state'）のテキスト（ '上传出错'）;
}）;
uploader.on（ 'uploadComplete'、関数（ファイル）{
$（ '＃' + file.id）.find（」進歩）、フェードアウト（）;
}）;
}）;
</スクリプト>
`` `
来源ます：http：//fex.baidu.com/webuploader/getting-started.html
二、jQueryの版实例
` `` HTMLの
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<META HTTP-当量= "Content-Typeの"コンテンツ= "text / htmlの;のcharset = UTF-8" />
<タイトル>设备升级</ TITLE>
<リンクのhref =」../静的/ CSS / webuploader。
ます。<script type = "text / javascriptの" SRC = "../静的/ JS / jquery.min.js "> </ SCRIPT>
ます。<script type =" text / javascriptの" SRC =」../静的/ JS / webuploader .js "> </ SCRIPT>
</ HEAD>
<BODY>
<DIV CLASS ="場所">
<span>の位置：</ span>の
<ULクラス=" placeul ">
<LI> <HREF =" ＃」 >首页する</a>ます。</ li>
<LI> <a href="#">系统-设备信息する</a>ます。</ li>
</ ulの>
</ div>
<divのクラス= "デバイス情報">
< ULクラス= "詳細">
<LIクラス= "項目">名称：<スパンID = "名前">工业监测审计系统</スパン></ LI>
<LIクラス= "項目">型号<スパンID = "タイプ"> INA-200 </スパン> </ LI>
<LIクラス= "項目">硬件版本：<スパンID = "hardwareVersion 「> INA-200-V1802005C </ span>を</ LI>
<LIクラス= "アイテム">ソフトウェアのバージョン：<上記のid = "softwareVersionを" SPAN> V2.0 </ span>を</ LI>
<LI>
<divの上記のid = "ピッカー">を選択し、</ div> <！ - - > -アップロードボタンを押すと、IDセレクタの値を指定する必要があります
。<DIV CLASS =「進歩」> <！ -プログレスバー- >
<divのクラス=「プログレスプログレスバーのActive-ストライプ」役割=「プログレスバー"スタイル="幅：0％; "> </ div>
</ div>
</ LI>
<LIクラス="項目"> SEQ ID NO：<スパンID ="のserialNumber " > CY18-NA2B-A018-5081 < /スパン> </ LI>
<LIクラス= "項目">メーカー：<スパンID = "メーカー" > 技術（北京）有限公司</スパン> </ LI>
<LIクラス= "項目">出厂日期<スパンID = "productionDate"> 2018年2月10日</スパン> </ LI>
</ UL>
</ div>
</ body>
</ HTML>
<スクリプトタイプ= "テキスト/ javascriptの">
$（ドキュメント）.ready（関数（）{
$アヤックス（{
タイプ： 'get'が
、 "system_deviceInformation"：データ
のURL： "/システム/のdevinfo / GETINFO"、
成功：機能（データ）{
$（ "＃名前"）HTML（data.name）;
$（" ＃型"）HTML（data.type）;
$（" ＃のhardwareVersion "）HTML（data.hardwareVersion）;
$（" ＃のsoftwareVersion」）のhtml。 （data.softwareVersion）;
$（ "＃1のserialNumber"）HTML（data.serialNumber）;
$（ "＃メーカー"）HTML（data.manufacturer）;
$（ "＃のproductionDate"）HTML（data.productionDate）。 ;
}
}）。
VAR TASK_ID = WebUploader.Base.guid（）; //は、一意のIDを生成
VAR = WebUploader.createアップローダ（{//アップロード制御作成
SWFを'../static/js/Uploader.swf'、// SWF位置を、これは、フラッシュに関連している可能性があり
、サーバー：「/アップロード/受け入れる」 、//は、 各フラグメントサーバアドレス受信
ピック：「#pickerを」、//ボタンIDアップロード
オート：trueに、//ファイルを選択した後、自動的にアップロードするか否か
チャンク：真、//フラグメントかどうか
CHUNKSIZE：20 * 1024 * 1024、 // 各タイルのサイズ、ここでは20M
スライス、再試行の回数アップロードに失敗した場合chunkRetry :. 3、//
スレッド：1を、/数/スレッド、考慮に私たちは1を選択したサーバを、服用
複製：真、//自動的に重複排除スライスするかどうか
FORMDATAを：{//搬送されるデータと、各スライスをアップロード
TASK_ID：TASK_IDを
}
）};
uploader.on（ 'startUpload'、関数（）{//アップロードを開始し、メソッドが呼び出される
$ CSS（ '幅'、 '0％'）;.（ 'プログレスバー。'）
$テキスト（ '0％'）;.（ 'プログレスバー。'）
}）;
uploader.on（スライスが正常にアップロード'uploadprogressの'機能（ファイル、割合）{//、メソッドが呼び出される
$（ 'プログレスバー' ）CSS（* 100'幅'、割合- 。1 +」 ％ '）;
$（'バープログレス）テキスト（Math.floor（百分率100 * - 1 +。。） '％'）;
}）;
uploader.on（「uploadSuccess」、機能（ファイル）{// すべてのフラグメントが正常にアップロードされているファイル全体を、メソッドが呼び出される
//情報（ユニークなファイル識別子は、ファイル名）がアップロードされた
VaRのデータを= {「TASK_ID」： TASK_ID、 'ファイル名'：file.source [ '名前']};
$に.get（ 'コンプリート/アップロード/'、データ）; // Ajaxのは、URLにデータ再送要求を運ぶ
$（ 'プログレスバー' ）。 CSS（ '幅'、 '100％'）;
。$（」・バー。プログレス）テキスト（ 'アップロード'）;
}）;
uploader.on（ 'uploadError'、機能（ファイル）{//アップロードプロセス異常がメソッドが呼び出され、発生した
（ 'プログレスバー'）$ CSS（ '幅'、 '100％'）;.
$（ 'プログレスバー。'）、テキスト（「「アップロードに失敗しました）;
}）;
uploader.on（ 'uploadComplete'、機能（ファイル）{//最終的に成功にかかわらず、ファイルアップロードの、最後のアップロード、メソッドが呼び出されます
。$（」。バープログレス）removeClass（ 'バーのActive-ストライプ進歩'）;
}）;
}）;
</ SCRIPT>
`` `
出典ます。https：//blog.csdn.net/jinixin/article /詳細/ 77545140
3、角版例1（下記のコードは、初期化フェーズを実行する）
、 `` `のJavaScript
IF（$ scope.file_.uploader）リターン;
VAR WebUploader.Base.guid TASK_ID =（）; //ユニークなIDを生成
$をscope.file_.uploader = WebUploader.create（{//アップロード制御作成
サーバ：//「./system/devinfo/upload」各断片サーバアドレス受信
ピック： 『＃装置-updata-ボタンを』 / ID /アップロードボタン
オート：真、//ファイルを選択した後、自動的にアップロードするようにするかどうかを
チャンク：真、//かどうかの断片
CHUNKSIZE：* 1024 * 1024 20、 // 各タイルのサイズ、ここでは20M
chunkRetry :. 3 //スライスのアップロードに失敗した場合は、再試行
スレッド：1、//スレッドの数を、考慮に私たちは1を選択したサーバを、服用
表示：フレックス;」 + '正当化-コンテンツを：フレックススタート;' +
'ALIGN-アイテム：センター;' +
'フレックス方向：カラム; ">' +
'<Pクラス= "テキスト・センター"スタイル= "マージン：10pxの0;">已经加载文件<スパンクラス= "進歩-ED"> </ span>を。 ... </ P> '+
' <IMG SRC = "../../静的/ IMG /アイコンupdata.png"スタイル= "マージン：30px 0;"幅= "37px"高さ= "40ピクセル" > '+
' <ボタンタイプ= "ボタン" NGクリック= "キャンセル（）" NG-バインド= "button_txt"クラス= "BTN BTN-デフォルト"スタイル= "色：＃1 d9534f;国境：1pxの固体＃1 d9534f。背景：#FFF; "> </ボタン> </ div>」、
tpl_scope：{
button_txt： '取消上传'、
キャンセル：
機能（）{ $ scope.file_.uploader.stop（真の）;
dir_alert.show（偽）;
}
}
}）
}）。
（ 'uploadprogressの'機能（ファイルの後の$ scope.file_.uploader.on 、割合）{// スライスが正常にアップロード、メソッドが呼び出される
$（ 'プログレスバー' ）。cssの（ '幅'、割合* 100から1 + '％'）;
$ - + '％'）（）テキスト（Math.floor（百分率100 * 1 'プログレス・バー。'）;
'進捗状況-ED' $（）テキスト（数学。 .floor（PERCENTAGE 100 * - 1）+ '％'）;
}）;
$ scope.file_.uploader.on（ 'uploadSuccessに'、関数（ファイル）{//ファイル全体のすべての部分が正常に呼び出すアップロードされ情報をアップロードする方法は、（一意の識別子、ファイル名ファイル）
{データ= VAR
：TASK_ID 'TASK_IDを'
'ファイル名'：file.source [ '名前']
};
$に.get（ './システムを/のDevInfo /完全' 、データ）; // AJAXのURLへのデータ再送要求運ぶ
'プログレスバー' $を（ ）、CSS（ '幅'、 '100％'）;
$（ '進捗状況-ED'）テキスト（ '100％'）;.
。$（」。バープログレス）テキスト（ 'アップロード'）;
$タイムアウト（関数（）{
dir_alert.show）（偽;
dir_alert.set（{
タイトル： '设备升级中...'、
click_other_hidden：偽、
icon_close：偽、
esc_close：偽、
テーマ：{
幅： '380px'
}、
TPL： '<DIVのNG-INIT = "INIT（）"スタイル= "表示：Flexは、' +
'正当化コンテンツをフレックススタート;' +
'ALIGN-アイテム：センター;' +
'フレックス方向：カラム; "> '+
' <IMG SRC =" ../../静的/ IMG / wait82_82px.png」クラス= "アップデータサークル"スタイル= "マージン：30px 0;"幅= "は50px"高さ= "は50px">」+
「<Pクラス= "テキスト・センター"スタイル= "マージン：10pxの0;">设备升级中、大约需要时间<スパンのスタイル= "色：赤、" NG-バインド= "time_s">午後3時</スパン>、请耐心等待</ P> </ div>」、。
tpl_scope：{
体timeval：ヌル、
time_s：'15：00' 、
時間：15 * 60、
INIT：関数（）{
この= VAR。
that.timeval = $間隔（関数（）{
that.time = that.time - 1;
（that.time === 0）{もし
that.timeval $ interval.cancel（that.timeval）：angular.noop（？ ）;
account_m.exit（）。
タイムアウト$（関数（）{
dir_alert.set（{
ボタン：trueに、
cancel_hiden：trueに、
タイトル： '結果をアップグレード'、
TPL： 'もう一度、正常にログインアップグレードしてください！'
}）;
}、1500）
リターン;
}
のvar H parseInt =（that.time / 60）;
VAR that.time分= 60％;
that.time_s =（H <10 '0' + H：？H）+ '：' +（MIN <10 '0'の+？分：分）。
}、1000）。
}
}
}）
}、2000）
}）;
$ scope.file_.uploader.on（ 'uploadError'、関数（ファイル）{
$（ 'プログレスバー。'）CSS（ '幅'、 '100％'。 ）;
$（ 'プログレスバー'）テキスト（「アップロードに失敗した）;.
}）;
`
4つの角版例2（下記のコードは、初期化フェーズを実行する）
` HTML
<DIV CLASS = "コモンカードスタイル">
<ENCTYPE =形成" multipart / form-data "をメソッド=" POST "ID ="プロトコル・プライベート・ファイル・アップロード・フォーム">
<DIV CLASS ="フォーム・インライン・プロトコル・プライベート・ロウ「>
<DIV CLASS = "フォームグループ">
<ラベル>
の<span> * </ span>の
<span>のプロトコル名</ span>を
</ label>は
<input type = "text"クラス= "フォームコントロール"名前= "名前" NG-モデル= "protocol_form.name"
ID = "プロトコル・プライベート・プロトコル名"スタイル= "パディング左：は50px;幅： 400ピクセル;」MAXLENGTH = "40">
<スパンクラス= "プレプロトコル文字列"> UDF - </スパン>
</ div>
</ div>
<DIV CLASS = "フォームインラインプロトコルプライベート行">
<DIVクラス= "フォームグループ">
<ラベル>
の<span> * </スパン>
の<span>协议脚本</スパン>
</ label>は
<ボタンタイプ= "ボタン"クラス=」
</ button>の
<スパン
NG-クラス= "{！ 'テキストの主'：files_list1 [0] .nameの、 'テキスト-危険'：files_list1 [0] .nameの}"> {{files_list1 [0] .nameの| | '请选择.lua格式文件'}} </スパン>
</ div>
</ div>
<DIV CLASS = "フォームインラインプロトコルプライベート行">
<DIV CLASS = "フォームグループ">
<ラベル>
の<span> * </ span>の
<スパン>协议描述</ span>を
</ label>は
<ボタンタイプ= "ボタン"クラス= "BTN BTN-概要-主要プロトコルのプライベートアップロードボタン">
选择文件
<入力タイプ=「ファイル」名=」セグメント」のonchange = "angular.element（本）.scope（）。fileChanged2（この）">
</ボタン>
<スパン
NG-クラス= "{ 'テキストの主'：files_list2 [0] .nameの、 'テキスト-危険'：！のfiles_list2 [0] .nameの}"> {{files_list2 [0] .nameの|| '请选择.proto格式文件'}} </スパン>
</ div>
</ div>
<DIV CLASS = "フォームインラインプロトコルプライベート行">
<DIV CLASS = "フォームグループ">
<ラベル> </ label>は
<ボタンタイプ= "送信" = NGクリック"start_uploadを（）"スタイル= "幅：250ピクセル"クラス= "BTN BTN-プライマリ"
！[0] .nameの|| NG-無効= "files_list1 files_list2 [0]！。 ||！protocol_form.name ">导入</ button>の名前
</ DIV>
</ DIV>
</ FORM>
</ div>
`` `
` ``のJavaScript
$ scope.fileChanged1 =関数（ELE）{
$ scope.files_list1 = ele.files。
$スコープ$（適用）。
}。
$ scope.fileChanged2 =関数（ELE）{
$ scope.files_list2 = ele.files。
$スコープ$（適用）。
}。
$ scope.start_upload =関数（）{
VARのFORMDATA =新しいいるFormData（のdocument.getElementById（ 'プロトコル・プライベート・ファイル・アップロード・フォーム'））;
。VARです。protocol_name = $（ '＃プロトコル・プライベート・プロトコル名'）のval（）;
formdata.set（ '名前'、（ 'UDF-' +のです。protocol_name））;
$アヤックス（{
URL： '/プロトコル/ selfdefine /アップロード'、
タイプ'ポスト'、
データ：FORMDATA、
PROCESSDATA：偽、
contentTypeの値：false、
成功：機能（RES）{
もし（res.status === 1）{
$のscope.g_tip（ '成功上传！'）;
$のscope.pagin_init.reload（）;
$ scope.files_list1 = '';
$ scope.files_list2 = '';
$ scope.protocol_form.name = '';
angular.element（ '入力[タイプ=ファイル]'）[0] .VALUE = '';
angular.element（ '入力[タイプ=ファイル]'）[1] .VALUE = '';
}そうであれば（res.status === 0）{
$のscope.g_alert（res.msg）。
}そうであれば（res.status === 1000）{
dir_alert.set（{
ボタン：真、
cancel_hiden：真、
click_other_hidden：偽、
icon_close：偽、
タイトル：「エラー」、
コンテンツ：「現在のセッションは、ログインページにジャンプしようとして有効期限が切れています。'
}）;
Account_m.exit（）;
}他{
$のscope.g_alert（'アップロードに失敗した'）;!
}
}、
エラー：関数（）{
$のscope.g_alert（'！通信障害「）;
}
}） ;
};
`
5、角度プロジェクトの要素自体にどの着信イベント要素
` HTML
<タイプのINPUT =名前を「ファイル」=「ルール」のonChange =「angular.element（この）。スコープ（）。fileChanged1（この） 「>
`` `
使用NG-変更指示、サーバー上の不必要なストレスが生じ、一度テキストクエリを入力するために頻繁に転送インタフェースをリードします。
使用NG-変更指示が、遅延が問題となっている、ここで適切であろうどのくらい、転送インタフェースの実装を遅らせ、遅延を追加しました。
ネイティブ変更イベント、エンドユーザーの入力、フォーカスのうち入力、ちょうどチューンインタフェースを置き換え。
問題の1説明：
（1）角度プロジェクト、なぜこの<入力タイプ= "ファイル" "angular.element（本）.scope（）fileChanged2（この）" NAME = "セグメント" NG変化= >
（2）角度のプロジェクトで、なぜこの中：タイプ=「ファイル」名=「セグメント」NG-変更は=「fileChanged2は（この）」>の<入力
（3）角度のプロジェクトでは、ネイティブのイベントを呼び出します。<input =タイプ"ファイル"の名称= "セグメント"のonChange = "angular.element（本）.scope（）fileChanged2（これは）">
2、問題が疑問：
（1）使用NG変化するので、呼び出し「fileChanged2を（直接べきこれは）angular.element（この）.scopeを（）「メソッドを使用すべきではない」 。 " 方法を見つけること。
それはNG-変化を使用するため（2）、直接「fileChanged2（この）」法と呼ばれる場合、これはむしろ入力要素よりも、マウスイベントオブジェクトと考えられます。
（3）ネイティブのonchangeイベントの使用は、JS文angular.element（この）.scope（）を使用します。fileChanged2（本）本渡される入力要素。
ブートストラッププロセスの動的なプログレスバー（2個のdivタグ）を使用して、六、
1、外部クラス=「進歩」スタイル=「幅：300ピクセル、」NG-ショー=「true」を、 所定のパターン表示領域の幅は、表示されます。
図1に示すように、内部クラス= "プログレス"役割= " "{：XXX幅}"、 "0" ARIA-valuenowをは= "60" ARIA-valuemax = "100" NGスタイルがプログレスバー=" ARIA-valueminの所定パターン表示領域、文字、現在の割合を算出するための電流値、前記最大値と最小値を示す、デフォルト値、最大値表示を表示、最小値を示しています。
HTML `` `
<：= NG-ショー"による300ピクセル幅"" init_study.state ===」1' 。 "のdivクラス=」進歩"スタイル=>
の<divクラス="プログレス"役割="プログレス「aria- = "0"アリア-valuenowを= "60"アリア-valuemax = "100" valueminの
>：NG-スタイル= "{init_study.progress幅を}"
！init_study.progress {{}} < -テキストは、プログレスバーに表示されますコンテンツ- >
</ div>
</ div>
`` `
7、HTML5のBlob実装ファイルのダウンロード機能
1、要素のvar A =のdocument.createElement（ 'A'を作成
3は、現在のファイルa.downloadをダウンロード= un_code.utf8Decode（data.headers（「ファイル名 」））; / * サーバーのファイル名を取得するために、ファイル、data.headers（ 『ファイル名』）をダウンロードしてローカルファイル名を作成し、un_code.utf8Decode異なる符号化UTF-8 * /エンコードさにファイルを変換するためのカスタムメソッド
）4、自動クリックa.click（;
5、要素$（A）.remove（）を取り除きます。
大きなファイル44（断片）は先端部アップロード=
おすすめ
転載: www.cnblogs.com/gushixianqiancheng/p/10966929.html
おすすめ
ランキング