file-api-reader.html

<html>
    
    <head>
        <title>File Api</title>
        <style>
            #byte_content {
                margin: 5px 0;
                max-height: 100px;
                overflow-y: auto;
                overflow-x: hidden;
            }
            #byte_range {
                margin-top: 5px;
            }
        </style>
        <script>
            // Check for the various File API support.
            if (window.File && window.FileReader && window.FileList && window.Blob) {
                // Great success! All the File APIs are supported.
                //alert('supported');
            } else {
                alert('The File APIs are not fully supported in this browser.');
            }
        </script>
        
        <!--
                TIT2, TPE1
                

        
D3`TENC@iTunes 9.1TIT2!Heartbreaker Baby (CJ Milli Mix)TCON(12)COMM#eng 00002AC3 00002A29 00012EAE 00POPMWindows Media Player 9 SeriesÿTPE1Justin Bieber x MSTRKRFT
        
D3 {TALB&Live at Manchester Apollo, 04.03.2013TYER2013TPE2 Sigur RósTCON Post RockTRCK4TIT2704 - Untitled 1 [Vaka] (Manchester Apollo, 04.03.2013)TPE1 Sigur Rós
        

        //-->
    </head>
    
    <body>
        <h1>File Api Reader</h1>
        <input type="file" id="files" name="file" />Read bytes:
        <span class="readBytesButtons">
            <button data-startbyte="0" data-endbyte="4">1-5</button>
            <button data-startbyte="5" data-endbyte="14">6-15</button>
            <button data-startbyte="1" data-endbyte="1000">1-1000</button>
            <button>entire file</button>
        </span>
        <div id="byte_range"></div>
        <div id="byte_content"></div>
        <script>
            function readBlob(opt_startByte, opt_stopByte) {

                var files = document.getElementById('files').files;
                if (!files.length) {
                    alert('Please select a file!');
                    return;
                }

                var file = files[0];
                var start = parseInt(opt_startByte) || 0;
                var stop = parseInt(opt_stopByte) || file.size - 1;

                var reader = new FileReader();

                // If we use onloadend, we need to check the readyState.
                reader.onloadend = function(evt) {
                    if (evt.target.readyState == FileReader.DONE) { // DONE == 2
                        document.getElementById('byte_content').textContent = evt.target.result;
                        document.getElementById('byte_range').textContent = ['Read bytes: ', start + 1, ' - ', stop + 1,
                                ' of ', file.size, ' byte file'
                        ].join('');
                        
                        
                        
                        console.debug('result: ', evt.target.result); 
                    }
                };

                var blob = file.slice(start, stop + 1);
                reader.readAsBinaryString(blob);
                
                //reader.readAsArrayBuffer(blob);
                
                //reader.readAsDataURL(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);
        </script>
    </body>

</html>