File API - Slice

HTML

<!DOCTYPE html>
<head>
</head>
<body>
    <header>
        <h1>File API - Slice</h1>        
    </header>
    <article>
        <label for="aFile">Select a file:</label>
        <input type="file" id="files" />
        <div class="readBytesButtons">
            <button>Mostrar Arquivo</button>
        </div>
        <div>
            <output id="content"></output>
        </div>
    </article>
</body>
</html>

CSS

body{
    font-family: "Verdana";
    font-size: 9pt;
}

header{
    padding: 15px;
    background-color: rgb(27, 161, 226);
    box-shadow: 0px 1px 2px rgba(0,0,0,0.4);
    color: #fff;
}

header h1{
    font-size: 12pt;
}

article{
    width: 80%;
    margin: auto;
    margin-top: 20px;
}

#content{
    max-height: 100px;
    margin: 5px 0;
}

JavaScript

function readBlob(startByte, endByte) {

    var files = document.getElementById('files').files;
    
    var file = files[0];
    var start = parseInt(startByte) || 0;
    var stop = parseInt(endByte) || file.size / 2;
    stop = 1024;

    var fileReader = new FileReader();

    fileReader .onloadend = function(evt) {
      if (evt.target.readyState == FileReader.DONE) { // DONE == 2
        document.getElementById('content').textContent = evt.target.result;        
      }
    };

    var blob = file.slice(start, stop + 1);
    fileReader.readAsBinaryString(blob);
  }
  
  document.querySelector('.readBytesButtons').addEventListener('click', function(evt) {
    if (evt.target.tagName.toLowerCase() == 'button') {
      var startByte = evt.target.getAttribute('data-startbyte');
      var endByte = evt.target.getAttribute('data-endbyte');
      readBlob(startByte, endByte);
    }
  }, false);