gaecom · November 21, 2013 03:42
diff --git a/jsbin.eGEYAQuc.css b/jsbin.eGEYAQuc.css
  #byte_content {
    margin: 5px 0;
    max-height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
  }
  #byte_range { margin-top: 5px; }

 #progress_bar {
    margin: 10px 0;
    padding: 3px;
    border: 1px solid #000;
    font-size: 14px;
    clear: both;
    opacity: 0;
    -moz-transition: opacity 1s linear;
    -o-transition: opacity 1s linear;
    -webkit-transition: opacity 1s linear;
  }
  #progress_bar.loading {
    opacity: 1.0;
  }
  #progress_bar .percent {
    background-color: #99ccff;
    height: auto;
    width: 0;
  }
diff --git a/jsbin.eGEYAQuc.html b/jsbin.eGEYAQuc.html
 <!DOCTYPE html>
 <html>
 <head>
 <meta name="description" content="[add your bin description]" />
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
 <meta charset=utf-8 />
 <title>JS Bin</title>
 </head>
 <body>
  <input type="file" id="files" name="files[]" multiple />
 <output id="list"></output>
  
  
  
 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="6" data-endbyte="7">7-8</button>
  <button>entire file</button>
 </span>
 <div id="byte_range"></div>
 <div id="byte_content"></div> 
  
  <button onclick="abortRead();">Cancel read</button>
 <div id="progress_bar"><div class="percent">0%</div></div>
 </body>
 </html>
diff --git a/jsbin.eGEYAQuc.js b/jsbin.eGEYAQuc.js
  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList对象 

    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
      output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                  f.size, ' bytes, last modified: ',
                  f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
                  '</li>');
      
      $('#list').html('<ul>' + output.join('') + '</ul>');
     var reader=new FileReader();
     if (/shellscript/.test(f.type)) {
            
            reader.onload = function() {
                $('<pre>' + this.result + '</pre>').appendTo('body');
           }
            reader.readAsText(f);
            
        }
      if(/image/.test(f.type)){
          reader.onload = function() {
                $('<img src="' + this.result + '" />').appendTo('body');
           }
          reader.readAsDataURL(f);
      }
    }
  
  }

   //$('#files').on('change', handleFileSelect);
 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('');
      }
    };

    if (file.webkitSlice) {
      var blob = file.webkitSlice(start, stop + 1);
    } else if (file.mozSlice) {
      var blob = file.mozSlice(start, stop + 1);
    }
    reader.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);




 var reader;
  var progress = $('.percent');

  function abortRead() {
    reader.abort();
  }

  function errorHandler(evt) {
    switch(evt.target.error.code) {
      case evt.target.error.NOT_FOUND_ERR:
        alert('File Not Found!');
        break;
      case evt.target.error.NOT_READABLE_ERR:
        alert('File is not readable');
        break;
      case evt.target.error.ABORT_ERR:
        break; // noop
      default:
        alert('An error occurred reading this file.');
    };
  }

  function updateProgress(evt) {
    // evt is an ProgressEvent.
    if (evt.lengthComputable) {
      var percentLoaded = Math.round((evt.loaded / evt.total) * 100);
      // Increase the progress bar length.
      if (percentLoaded < 100) {
        progress.style.width = percentLoaded + '%';
        progress.textContent = percentLoaded + '%';
      }
    }
  }

  function handleFileSelect2(evt) {
    // Reset progress indicator on new file selection.
    progress.style.width = '0%';
    progress.textContent = '0%';

    reader = new FileReader();
    reader.onerror = errorHandler;
    reader.onprogress = updateProgress;
    reader.onabort = function(e) {
      alert('File read cancelled');
    };
    reader.onloadstart = function(e) {
     $('#progress_bar')[0].className = 'loading';
    };
    reader.onload = function(e) {
      // Ensure that the progress bar displays 100% at the end.
      progress.style.width = '100%';
      progress.textContent = '100%';
      setTimeout("$('#progress_bar')[0].className='';", 2000);
    }

    // Read in the image file as a binary string.
    reader.readAsBinaryString(evt.target.files[0]);
  }

  $('#files').on('change', handleFileSelect2);
	#byte_content {
	margin: 5px 0;
	max-height: 100px;
	overflow-y: auto;
	overflow-x: hidden;
	}
	#byte_range { margin-top: 5px; }

	#progress_bar {
	margin: 10px 0;
	padding: 3px;
	border: 1px solid #000;
	font-size: 14px;
	clear: both;
	opacity: 0;
	-moz-transition: opacity 1s linear;
	-o-transition: opacity 1s linear;
	-webkit-transition: opacity 1s linear;
	}
	#progress_bar.loading {
	opacity: 1.0;
	}
	#progress_bar .percent {
	background-color: #99ccff;
	height: auto;
	width: 0;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="[add your bin description]" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
	<meta charset=utf-8 />
	<title>JS Bin</title>
	</head>
	<body>
	<input type="file" id="files" name="files[]" multiple />
	<output id="list"></output>



	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="6" data-endbyte="7">7-8</button>
	<button>entire file</button>
	</span>
	<div id="byte_range"></div>
	<div id="byte_content"></div>

	<button onclick="abortRead();">Cancel read</button>
	<div id="progress_bar"><div class="percent">0%</div></div>
	</body>
	</html>
	function handleFileSelect(evt) {
	var files = evt.target.files; // FileList对象

	// files is a FileList of File objects. List some properties.
	var output = [];
	for (var i = 0, f; f = files[i]; i++) {
	output.push('<li><strong>', escape(f.name), '</strong> (', f.type \|\| 'n/a', ') - ',
	f.size, ' bytes, last modified: ',
	f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
	'</li>');

	$('#list').html('<ul>' + output.join('') + '</ul>');
	var reader=new FileReader();
	if (/shellscript/.test(f.type)) {

	reader.onload = function() {
	$('<pre>' + this.result + '</pre>').appendTo('body');
	}
	reader.readAsText(f);

	}
	if(/image/.test(f.type)){
	reader.onload = function() {
	$('<img src="' + this.result + '" />').appendTo('body');
	}
	reader.readAsDataURL(f);
	}
	}

	}

	//$('#files').on('change', handleFileSelect);
	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('');
	}
	};

	if (file.webkitSlice) {
	var blob = file.webkitSlice(start, stop + 1);
	} else if (file.mozSlice) {
	var blob = file.mozSlice(start, stop + 1);
	}
	reader.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);




	var reader;
	var progress = $('.percent');

	function abortRead() {
	reader.abort();
	}

	function errorHandler(evt) {
	switch(evt.target.error.code) {
	case evt.target.error.NOT_FOUND_ERR:
	alert('File Not Found!');
	break;
	case evt.target.error.NOT_READABLE_ERR:
	alert('File is not readable');
	break;
	case evt.target.error.ABORT_ERR:
	break; // noop
	default:
	alert('An error occurred reading this file.');
	};
	}

	function updateProgress(evt) {
	// evt is an ProgressEvent.
	if (evt.lengthComputable) {
	var percentLoaded = Math.round((evt.loaded / evt.total) * 100);
	// Increase the progress bar length.
	if (percentLoaded < 100) {
	progress.style.width = percentLoaded + '%';
	progress.textContent = percentLoaded + '%';
	}
	}
	}

	function handleFileSelect2(evt) {
	// Reset progress indicator on new file selection.
	progress.style.width = '0%';
	progress.textContent = '0%';

	reader = new FileReader();
	reader.onerror = errorHandler;
	reader.onprogress = updateProgress;
	reader.onabort = function(e) {
	alert('File read cancelled');
	};
	reader.onloadstart = function(e) {
	$('#progress_bar')[0].className = 'loading';
	};
	reader.onload = function(e) {
	// Ensure that the progress bar displays 100% at the end.
	progress.style.width = '100%';
	progress.textContent = '100%';
	setTimeout("$('#progress_bar')[0].className='';", 2000);
	}

	// Read in the image file as a binary string.
	reader.readAsBinaryString(evt.target.files[0]);
	}

	$('#files').on('change', handleFileSelect2);