<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル>ファイルのアップロード</ TITLE>
<スタイル>
＃ボックス{
幅：400ピクセル;
高さ：400ピクセル;
国境：1pxの固体#CCC。
マージン：20ピクセル20ピクセル;
}
</スタイル>
</ head>の
<身体>
<input type = "ファイル">
<DIV ID = "ボックス"> </ div>
<スパン>画像のアップロードの進行状況：</ span>の
<進行分= "0" 最大= "0" 値= "0"> </進捗>
</ BODY>
<スクリプト>
//要素を取得
VAR入力= document.getElementsByTagName（ '入力'）[0];
VARボックス=のdocument.getElementById（ '箱'）;
VAR進捗= document.getElementsByTagName（ '進歩'）[0];
input.onchange =関数（E）{
VAR E = window.event || E;
/ **
最初は、ファイルを読み取るためにこの入力を使用し、次いで得られたオブジェクト・ファイルは、ファイルパス、ファイルパスを読み、次にimgタグに割り当てられた使用します。
** /
//読み込みファイル情報
varファイル= e.target.files [0];
//読み取り対象ファイルをインスタンス; FileReaderの（）それ自体がオブジェクトであるJS
VARリーダ=新規FileReader（）。
//読み込むファイルのファイルURL情報
reader.readAsDataURL（ファイル）;
reader.onload =関数（）{
//ターゲットIMGを作成します。
VaRのIMG =のdocument.createElement（ 'IMG'）;
img.src = this.result。
img.style.width = '400ピクセル';
img.style.height = '400ピクセル';
box.appendChild（IMG）。
}
//ファイル読み込みの進捗バー
reader.onprogress =関数（ENT）{
//ent.loaded現在の全体的な進行状況がプログレスent.totalです
progress.value = ent.loaded / ent.total。
}
}
</ SCRIPT>
</ HTML>