1         <style>
 2             #byte_content {
 3                 margin: 5px 0;
 4                 max-height: 100px;
 5                 overflow-y: auto;
 6                 overflow-x: hidden;
 7             }
 8 
 9             #byte_range {
10                 margin-top: 5px;
11             }
12         </style>
13         <span class="file-input btn btn-primary btn-file">
14             <input type="file" id="file1" name="file" />
15             Read bytes: 
16         </span>
17         <span class="readBytesButtons">
18             <button class="btn btn-primary" data-startbyte="0" data-endbyte="4">1-5</button>
19             <button class="btn btn-primary"data-startbyte="5" data-endbyte="14">6-15</button>
20             <button class="btn btn-primary"data-startbyte="6" data-endbyte="7">7-8</button>
21             <button class="btn btn-primary">entire file</button>
22         </span>
23         <div id="byte_range"></div>
24         <div id="byte_content"></div>
25 
26         <script>
27             function readBlob(opt_startByte, opt_stopByte) {
28 
29                 var files = document.getElementById('file1').files;
30                 if (!files.length) {
31                     alert('Please select a file!');
32                     return;
33                 }
34 
35                 var file = files[0];
36                 var start = parseInt(opt_startByte) || 0;
37                 var stop = parseInt(opt_stopByte) || file.size - 1;
38 
39                 var reader = new FileReader();
40 
41                 // If we use onloadend, we need to check the readyState.
42                 reader.onloadend = function (evt) {
43                     if (evt.target.readyState == FileReader.DONE) { // DONE == 2
44                         document.getElementById('byte_content').textContent = evt.target.result;
45                         document.getElementById('byte_range').textContent =
46                             ['Read bytes: ', start + 1, ' - ', stop + 1,
47                              ' of ', file.size, ' byte file'].join('');
48                     }
49                 };
50 
51                 var blob = file.slice(start, stop + 1);
52                 reader.readAsBinaryString(blob);
53             }
54 
55             document.querySelector('.readBytesButtons').addEventListener('click', function (evt) {
56                 if (evt.target.tagName.toLowerCase() == 'button') {
57                     var startByte = evt.target.getAttribute('data-startbyte');
58                     var endByte = evt.target.getAttribute('data-endbyte');
59                     readBlob(startByte, endByte);
60                 }
61             }, false);
62         </script>