Don't like ads? PRO users don't see any ads ;-)
Guest

Untitled

By: a guest on May 7th, 2012  |  syntax: JavaScript  |  size: 5.11 KB  |  hits: 13  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <script type="text/javascript">
  2.       var bytesUploaded = 0;
  3.       var bytesTotal = 0;
  4.       var previousBytesLoaded = 0;
  5.       var intervalTimer = 0;
  6.  
  7.       function fileSelected() {
  8.         var file = document.getElementById('fileToUpload').files[0];
  9.         var fileSize = 0;
  10.         if (file.size > 1024 * 1024)
  11.           fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
  12.         else
  13.           fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
  14.         document.getElementById('fileInfo').style.display = 'block';
  15.         document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
  16.         document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
  17.         document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
  18.       }
  19.      
  20.       function uploadFile() {
  21.         previousBytesLoaded = 0;
  22.         document.getElementById('uploadResponse').style.display = 'none';
  23.         document.getElementById('progressNumber').innerHTML = '';
  24.         var progressBar = document.getElementById('progressBar');
  25.         progressBar.style.display = 'block';
  26.         progressBar.style.width = '0px';        
  27.        
  28.         var fd = new FormData();
  29.         fd.append("author", "Shiv Kumar");
  30.         fd.append("name", "Html 5 File API/FormData");
  31.         fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);
  32.        
  33.         var xhr = new XMLHttpRequest();        
  34.         xhr.upload.addEventListener("progress", uploadProgress, false);
  35.         xhr.addEventListener("load", uploadComplete, false);
  36.         xhr.addEventListener("error", uploadFailed, false);
  37.         xhr.addEventListener("abort", uploadCanceled, false);
  38.         xhr.open("POST", "upload.php");
  39.         xhr.send(fd);
  40.  
  41.         intervalTimer = setInterval(updateTransferSpeed, 500);
  42.       }
  43.  
  44.       function updateTransferSpeed() {
  45.         var currentBytes = bytesUploaded;
  46.         var bytesDiff = currentBytes - previousBytesLoaded;
  47.         if (bytesDiff == 0) return;
  48.         previousBytesLoaded = currentBytes;
  49.         bytesDiff = bytesDiff * 2;
  50.         var bytesRemaining = bytesTotal - previousBytesLoaded;
  51.         var secondsRemaining = bytesRemaining / bytesDiff;
  52.  
  53.         var speed = "";
  54.         if (bytesDiff > 1024 * 1024)
  55.           speed = (Math.round(bytesDiff * 100/(1024*1024))/100).toString() + 'MBps';
  56.         else if (bytesDiff > 1024)
  57.           speed =  (Math.round(bytesDiff * 100/1024)/100).toString() + 'KBps';
  58.         else
  59.           speed = bytesDiff.toString() + 'Bps';
  60.         document.getElementById('transferSpeedInfo').innerHTML = speed;
  61.         document.getElementById('timeRemainingInfo').innerHTML = '| ' + secondsToString(secondsRemaining);        
  62.       }
  63.  
  64.       function secondsToString(seconds) {        
  65.         var h = Math.floor(seconds / 3600);
  66.         var m = Math.floor(seconds % 3600 / 60);
  67.         var s = Math.floor(seconds % 3600 % 60);
  68.         return ((h > 0 ? h + ":" : "") + (m > 0 ? (h > 0 && m < 10 ? "0" : "") + m + ":" : "0:") + (s < 10 ? "0" : "") + s);
  69.       }
  70.  
  71.       function uploadProgress(evt) {
  72.         if (evt.lengthComputable) {
  73.           bytesUploaded = evt.loaded;
  74.           bytesTotal = evt.total;
  75.           var percentComplete = Math.round(evt.loaded * 100 / evt.total);
  76.           var bytesTransfered = '';
  77.           if (bytesUploaded > 1024*1024)
  78.             bytesTransfered = (Math.round(bytesUploaded * 100/(1024*1024))/100).toString() + 'MB';
  79.           else if (bytesUploaded > 1024)
  80.             bytesTransfered = (Math.round(bytesUploaded * 100/1024)/100).toString() + 'KB';
  81.           else
  82.             bytesTransfered = (Math.round(bytesUploaded * 100)/100).toString() + 'Bytes';
  83.  
  84.           document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
  85.           document.getElementById('progressBar').style.width = (percentComplete * 3.55).toString() + 'px';
  86.           document.getElementById('transferBytesInfo').innerHTML = bytesTransfered;
  87.           if (percentComplete == 100) {
  88.             document.getElementById('progressInfo').style.display = 'none';
  89.             var uploadResponse = document.getElementById('uploadResponse');
  90.             uploadResponse.innerHTML = '<span style="font-size: 18pt; font-weight: bold;">Please wait...</span>';
  91.             uploadResponse.style.display = 'block';
  92.           }
  93.         }
  94.         else {
  95.           document.getElementById('progressBar').innerHTML = 'unable to compute';
  96.         }  
  97.       }
  98.  
  99.       function uploadComplete(evt) {
  100.         clearInterval(intervalTimer);
  101.         var uploadResponse = document.getElementById('uploadResponse');
  102.         uploadResponse.innerHTML = evt.target.responseText;
  103.         uploadResponse.style.display = 'block';
  104.       }  
  105.  
  106.       function uploadFailed(evt) {
  107.         clearInterval(intervalTimer);
  108.         alert("An error occurred while uploading the file.");  
  109.       }  
  110.  
  111.       function uploadCanceled(evt) {
  112.         clearInterval(intervalTimer);
  113.         alert("The upload has been canceled by the user or the browser dropped the connection.");  
  114.       }  
  115.  
  116.     </script>