ファイルアップロード原理
HTTPプロトコルの定義によれば、終了要求メッセージボディをカプセル化し、バイナリの内容を保存するファイルを解析します。
キーワード：
マルチパート/フォームデータ
意味：
マルチパート資源はポストモードまたはHTMLフォームを使用してフォームデータファイルをアップロード、さまざまな要素を表しています。
構造：
- 要求ヘッダー：要求は、境界区切りを表すファイルをアップロードすることを示しています。
コンテンツタイプ：マルチパート/フォームデータ; 境界= ---- WebKitFormBoundary2ahjiirVMKa4Qn78
- メッセージ本文 - フォームデータ部分
Content-Disposition: form-data固定値、フォーム要素が表すnameフォーム要素の名前を表し、キャリッジリターンラインがフィードバックされname、それはコンテンツファイルをアップロードされたバイナリファイルである場合、価値。
Content-Type：MIMEタイプ（タイプ/サブタイプ）+一般的なサブクラス、画像やテキストまたはバイナリデータの現在の内容を示します（テキスト/ ..アプリケーション/ ...画像/動画... / ...）。
解像度：
クライアントは、メッセージ本文を取得するためにサーバーを要求サーバに要求を送信した後、一般的な形態であり、付属品である解析によって解析されます。一般的に、パーサーを必要としない、サードパーティ製のライブラリが用意されていがあります。
リフレッシュなしでアップロード
キーワード：
XMLHttpRequestの
XMLHttpRequest2はアップグレードでは、すべての最初は、あなたが読んで、バイナリデータをアップロードし、・いるFormData・オブジェクトマネージャフォームデータを使用することができますということです。
例：
< DIV > ファイル（複数回答）を選択します。 < 入力タイプ= "FILE" ID = "F1" 多重/> < BR /> < BR /> < ボタンタイプ= "ボタン" ID = "BTN-提出" >上传</ ボタン> </ DIV >
<スクリプト>
関数submitUpload（）{
// ファイルの一覧を取得し、これは、配列が、オブジェクトではないことに注意して
VARのfileList =のdocument.getElementById（ 'F1' ）.files;
IF（！fileList.length）{
アラート（「ファイルの選択」）;
を返します;
}
VaRの FD = 新しいいるFormData（）; // 构造いるFormData对象
fd.append（ 'タイトル'、のdocument.getElementById（ 'タイトル' ）.VALUE）。
// ファイルのアップロードは、オブジェクトを横切るfromdata必要に追加
するために（VAR ; IはfileList.lengthを<I ++はI = 0 ）{
fd.append（ 'F1'のfileList [I]）; // サポートファイルのアップロード
}
VAR XHR = 新新のXMLHttpRequest（）; //は、オブジェクトを作成
xhr.open（ 'POST'、 'HTTP：// localhostを：8100 /'、trueにします）。
xhr.send（FD）; //はデフォルトの送信は、Content-Typeである：マルチパート/フォームデータ;
xhr.onreadystatechange = 関数（）{
console.log（ '状態変化' 、xhr.readyState）。
もし（この .readyStateの== 4 && この .status == 200 ）{
VAR OBJ = JSON.parse（xhr.responseText）。 // 返回值
にconsole.log（OBJ）。
もし（obj.fileUrl.length）{
アラート（「が正常にアップロード」）;
}
}
}
}
// イベントバインド
のdocument.getElementById（ 'BTN-提出'）のaddEventListener（。 'クリック' ;、SubmitUpload）
</スクリプト>
プログレスバーを達成
XMLHttpRequest2では、ファイルアップロードの進捗バー単一または複数のファイルを達成するために。
说明
- ページ内の増加がために使用されるラベルの進行状況が表示されます
div.progress jsプロセスの処理機能モニタの進捗状況の増加xhr.upload.onprogressevent.lengthComputableこれは、計算され変更された変速機の長さで表される状態でありますevent.loadedこれは、送信されたバイト数を表しevent.totalこれは、ファイルの合計サイズを表し、- よる
event.loadedとevent.total、計算の進捗状況、レンダリングdiv.progress
< DIV > ファイル（複数回答）を選択します。 < 入力タイプ= "ファイル" ID = "F1" 多重/> < BR /> < BR /> < DIV ID = "進行" > < スパンクラス= "赤" > </ スパン> </ DIV > < ボタンタイプ= "ボタン" ID = "BTN-提出" >上传</ ボタン> </ DIV >
<スクリプト>
関数submitUpload（）{
VAR progressSpan =のdocument.getElementById（ '進歩' ）.firstElementChild。
VARのfileList =のdocument.getElementById（ 'F1' ）.files。
progressSpan.style.width = '0' ;
progressSpan.classList.remove（ 'グリーン' ）。
もし（！fileList.length）{
アラート（「ファイルの選択」）;
を返します;
}
VaRの FD = 新しいいるFormData（）; // 构造いるFormData对象
fd.append（ 'タイトル'、のdocument.getElementById（ 'タイトル' ）.VALUE）。
用（VAR ; iはfileList.lengthを<I ++は、I = 0 ）{
fd.append（ 'F1'のfileList [I]）; // サポートファイルのアップロード
}
VaRの XHR = 新新のXMLHttpRequest（）; // オブジェクトの作成
（ 'POST'、 'http://10.70.65.235:8100/' xhr.openをtrueに）。
xhr.onreadystatechange = 関数（）{
console.log（ '状態変更' 、xhr.readyState）;
IF（xhr.readyState == 4 ）{
VAR OBJ = JSON.parse（xhr.responseText）; // 戻り値
はconsole.log（OBJ）;
IF （OBJ .fileUrl.length）{
// アラート（ '成功アップロード'）;
}
}
}
xhr.onprogress = のUpdateProgress。
xhr.upload.onprogress = のUpdateProgress。
関数のUpdateProgress（イベント）{
console.log（イベント）。
もし（event.lengthComputable）{
VARの completedPercent =（event.loaded / event.total * 100）.toFixed（2 ）。
progressSpan.style.width = completedPercent + '％' ;
progressSpan.innerHTML = completedPercent + '％' ;
IF（completedPercent> 90）{ // プログレスバー変色
progressSpan.classList.add（ 'グリーン' ）。
}
console.log（ 'アップロード' 、completedPercent）。
}
}
// そうでない場合onprogress最後を実行する、底部に書き込まなければならない送信注時間の100％である
xhr.send（FD）; // デフォルトのContent-Typeを送信である：マルチパート/フォームデータ;
}
// イベントバインド
のdocument.getElementById（ 'BTN-提出'）のaddEventListener（。 'クリック' 、submitUploadを）。
</ SCRIPT>
PS思い出させます
xhr.upload.onprogress書くxhr.sendそうでない場合は、法の前event.lengthComputableの状態を取得するには、最後のものだけを変更することはありません、それがある100%時。