__HTML_5讀取文件API - diligenceday－IT工程師數位筆記本

文章出處

//HTML5 __FileSystemApi

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
</head>
<body>
<style>
  .thumb {
    height: 75px;
    border: 1px solid #000;
    margin: 10px 5px 0 0;
  }
</style>

<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

<script>
  function handleFileSelect(evt) {
    var files = evt.target.files;
    for (var i = 0, f; f = files[i]; i++) {


      var reader = new FileReader();
      reader.onload = function(e){
          var span = document.createElement('span');
          span.innerHTML =this.result;
          document.getElementById('list').insertBefore(span, null);
      }

      reader.readAsText(f);
　　　 //reader.readAsArrayBuffer;
　　   //reader.readAsBinaryString;
 　　　//reader.readAsDataURL

    }
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
 
</body>
</html>