liguofeng29’s blog

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

HTML5のform関連 - javascriptでクライアントファイル中身アクセス

HTML5 ┗━HTML5のform関連 
<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title> ファイル中身アクセス </title>
</head>
<body>
ファイル選択<input id="file1" type="file"/><br/>
<div id="result"></div>
<input type="button" value="テキスト読取" onclick="readText();"/><br/>
<input type="button" value="バイナリ読取" onclick="readBinary();"/><br/>
<input type="button" value="DataURL読取" onclick="readURL();"/><br/>
<script type="text/javascript">
var reader = null;
// FileReaderサポートする
if(FileReader)
{
   reader = new FileReader();
}
// FileReaderサポートしない
else
{
   alert("FileReaderサポートしてないブラウザですね");
}
var readText = function()
{
   // テキストなのか
   if(/text\/\w+/.test(document.getElementById("file1").files[0].type))
   {
       // テキスト読み取り
       reader.readAsText(document.getElementById("file1").files[0] , "SJIS");
       // 読み取り完了時
       reader.onload = function()
       {
           document.getElementById("result").innerHTML = reader.result;
       };
   }
   else
   {
       alert("テキストファイルではないです");
   }
}
var readBinary = function()
{
   // バイナリ読み取り
   reader.readAsBinaryString(document.getElementById("file1").files[0]);
   // 読み取り完了時
   reader.onload = function()
   {
       document.getElementById("result").innerHTML = reader.result;
   };
}
var readURL = function()
{
   // DataURL読み取り
   reader.readAsDataURL(document.getElementById("file1").files[0]);
   // 読み取り完了時
   reader.onload = function()
   {
       document.getElementById("result").innerHTML = reader.result;
   };
}
</script>
</body>
</html>

f:id:liguofeng29:20160120232526g:plain