HTML5 拖拽上传显示进度条

html部分：

<div id="upload-box" class="jumbotron" style="text-align: center;border: 2px dashed #ff9163;">
   <h2>将文件拖动到此处上传</h2>
</div>

JavaScript部分

<script>
$(function(){
  var box = document.getElementById("upload-box");
  $(document).on({
    dragenter: function(e){
      e.stopPropagation();
      e.preventDefault();
    },
    dragover: function(e){
      e.stopPropagation();
      e.preventDefault();
      box.innerHTML = "<h2>松开鼠标开始上传</h2>";
    },
    dragleave: function(e){
      e.stopPropagation();
      e.preventDefault();
      box.innerHTML = "<h2>拖拽到这里上传</h2>";
    },
    drop: function(e){
      e.stopPropagation();
      e.preventDefault();
      box.innerHTML = "<h2>上传中...</h2>";
      var files = e.originalEvent.dataTransfer.files;
      var xhr = new XMLHttpRequest();
      var formData = new FormData();
      for(var i = 0; i < files.length; i++){
        formData.append("myfile", files[i]);
      }
      xhr.upload.onprogress = function(e){
        if(e.lengthComputable){
          var precentage = Math.round((e.loaded * 100)/ e.total);
          box.innerHTML = "<h2>上传中(" + precentage + "%)...</h2>";
        }
      }
      xhr.onload = function(e){
        box.innerHTML = "<h2>上传成功，请刷新页面</h2>";
      }
      xhr.onerror = function(e){
        box.innerHTML = "<h2>上传失败</h2>";
      }
      xhr.open("post", "/upload", true);
      xhr.send(formData);
    }
  })
})
</script>