Input type=fileとFileReader APIによるブラウザクライアントでの選択ダイアログからのファイルの読み取り

1572 ワード

ブラウザアプリ機能 httml 5 ファイル input

問題のように、input type=fileとFileReader APIを利用して、ブラウザクライアントでダイアログボックスを選択してファイルを読み取ることを実現します.コードは以下のように、テキストファイルを読み取る例です.

<!DOCTYPE html>
<html>
  <head>
    <title><input> File Selection</title>
  </head>
  <body>
    <h1>HTML5 <input> File Selection</h1>
    <h3>Example 1</h3>
    <input type="file" id="fileSelector" multiple />
    <script type="text/javascript">
      var message = [];

      if (!document.getElementById('fileSelector').files) {
        message = '<p>      FileReader API</p>';
      
        document.querySelector('body').innerHTML = message;
      }
      else {
        document.getElementById('fileSelector').addEventListener('change', handleFileSelection, false);
      }
      
      function handleFileSelection(evt) {    
        var files = evt.target.files;  
        if (!files) {
          msa.alert("<p>At least one selected file is invalid - do not select any folders.</p><p>Please reselect and try again.</p>");
          return;
        }
		
		var fileType = files[0].type;
		
		reader = new FileReader();
		
		if (fileType.indexOf('text/plain') == -1) {
            alert('       ~');
            return;
        }

        reader.onload = function(e) {
			console.log(this.result);
        }
        reader.readAsText(files[0]);
      }
    </script>
  </body>
</html>

iOSのCookieアクセスは絶対に十分です!!

Vue.Js(html 5)+Java実装ファイルスライスアップロード