hash.html

<div class="d-flex flex-row flex-wrap">

<div id="hasher" class="playtile">
  <div class="tile_title text-center">Hasher</div>
  <div id="holder" class="d-flex justify-content-center">
    <div id="busy" class="loader" style="display:none;"></div>
    <div id="hasher_tip" style="display:block;">Drop a file here to get its hash.</div>
  </div>
  <div class="row">
    <div class="col-2">file:</div> 
    <div class="col" id="filename">none</div>
  </div >
  <div class="row">
    <div class="col-2">mime: </div>
    <div class="col" id="mimetype">none</div>
  </div >
  <div class="row">
    <div class="col-2">size: </div>
    <div class="col" id="filesize">0</div> 
    <div class="col-2"> bytes </div>
  </div >
  <div>
    <div>md5sum: </div>
    <div class="hash" id="md5sum"></div>
  </div>
  <div>
    <div>sha1: </div>
    <div class="hash" id="sha1sum"></div>
  </div>
  <div>
    <div>sha256: </div>
    <div class="hash" id="sha256sum"></div>
  </div>
  <div>
    <div> sha512: </div>
    <div class="hash" id="sha512sum"></div>
  </div>
</div>
</div>


<!--div id="myfilereader" class="playtile">
  <div class="tile_title text-center">File Reader</div>
<input type="file" id="files" name="file" /> 
  <br>Read bytes:<br> 
<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>

</span>
<div id="byte_range"></div>
<div id="byte_content"></div>
</div-->

<style type="text/css">
  .tile_title { margin-bottom:8px; line-height: 2em; font-size: 1.25rem; 
    box-shadow: inset 0 0 5px rgba(0,0,0,0.15);}
  .thumb { height: 75px; border: 1px solid #000; margin: 10px 5px 0 0; }
  input, button { margin: 5px; }
  button { width: 100px; }
  .playtile { padding: .5rem!important; 
    box-shadow: inset 0 0 5px rgba(0,0,0,0.15);  border: 1px solid #ccc; 
    padding:5px; margin:5px; width:35em; min-width:35em; min-height:28em; }
  #holder { border: 10px dashed #ccc;  height: 5em; padding: 10px; }
  #holder.hover { border: 10px dashed #333; }
  .hash {overflow-wrap: break-word; box-shadow: inset 0 0 5px rgba(155,0,0,0.15); padding-left:5px;}
  #byte_content { margin: 5px 0; max-height: 100px; overflow-y: auto; overflow-x: hidden; }
  #byte_range { margin-top: 5px; }
  .loader {
    border: 0.5em solid #f3f3f3;
  	border-radius: 50%;
  	border-left: 0.5em solid #3498db;
    border-top: 0.5em solid #3498db;

  	width: 2.75em;
  	height: 2.75em;
  	-webkit-animation: spin 2s linear infinite; /* Safari */
  	animation: spin 2s linear infinite;

}  

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin { 
  0% { transform: rotate(0deg); } 
  100% { transform: rotate(360deg); } }
</style>
             
<script type="application/javascript">

  var holder = document.getElementById('holder');
holder.ondragover = function() {
  return false;
};
holder.ondragend = function() {
  return false;
};

window.addEventListener('load', function() {
  var md5 = CryptoJS.MD5("").toString();
  var sha1 = CryptoJS.SHA1("").toString();
  var sha256 = CryptoJS.SHA256("").toString();
  var sha512 = CryptoJS.SHA512("").toString();
  document.getElementById('md5sum').innerHTML = md5;
  document.getElementById('sha1sum').innerHTML = sha1;
  document.getElementById('sha256sum').innerHTML = sha256;
  document.getElementById('sha512sum').innerHTML = sha512;
  
});
          
holder.ondrop = function(event) {
  event.preventDefault();
  
  var file = event.dataTransfer.files[0];
  
  document.getElementById('busy').style = "display:block;"
  document.getElementById('hasher_tip').style = "display:none;"
  document.getElementById('filename').innerHTML = file.name;
  document.getElementById('mimetype').innerHTML = file.type;
  document.getElementById('filesize').innerHTML = file.size
  document.getElementById('md5sum').innerHTML = "00000000000000000000000000000000";
  document.getElementById('sha1sum').innerHTML = "0000000000000000000000000000000000000000";
  document.getElementById('sha256sum').innerHTML = "0000000000000000000000000000000000000000000000000000000000000000";
  document.getElementById('sha512sum').innerHTML = "00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000";

  var reader = new FileReader();

  reader.onload = function(event) {
    
    var base64String = event.target.result.split(',')[1];
    var binary = CryptoJS.enc.Base64.parse(base64String);
    
    console.log(file.name);
    console.log(file.type);
    console.log(file.size);
    
    var md5 = CryptoJS.MD5(binary).toString();
    var sha1 = CryptoJS.SHA1(binary).toString();
    var sha256 = CryptoJS.SHA256(binary).toString();
    var sha512 = CryptoJS.SHA512(binary).toString();
    
    document.getElementById('md5sum').innerHTML = md5;
    document.getElementById('sha1sum').innerHTML = sha1;
    document.getElementById('sha256sum').innerHTML = sha256;
    document.getElementById('sha512sum').innerHTML = sha512;
    document.getElementById('busy').style = "display:none;"
    document.getElementById('hasher_tip').style = "display:block;"
  };

  reader.readAsDataURL(file);
};
   
  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('');
      }
    };

    var blob = file.slice(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);

</script>