liguofeng29’s blog

個人勉強用ブログだっす。

HTML5のform関連 - javascriptでクライアントファイル読み取り進捗表示

HTML5 ┗━HTML5のform関連 
<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title> progress表示 </title>
</head>
<body>
ファイル選択<input id="file1" type="file"/><br/>
読み取り進捗<progress id="pro" value="0"></progress>
<div id="result"></div>
<input type="button" value="バイナリ読み取り" onclick="readBinary();"/><br/>
<script type="text/javascript">
var reader = null;
// FileReaderサポートするか
if(FileReader)
{
   reader = new FileReader();
}
// FileReaderサポートしない
else
{
   alert("FileReaderしてないね");
}
var readBinary = function()
{
   // バイナリ読み取り
   reader.readAsBinaryString(document.getElementById("file1").files[0]);
   var pro = document.getElementById("pro");
   pro.max = document.getElementById("file1").files[0].size;
   // 読み取り中のイベント
   reader.onprogress = function(evt)
   {
       pro.value = evt.loaded;
   };
}
</script>
</body>
</html>

f:id:liguofeng29:20160120233019g:plain