js

     $(function () {
        $('#fileupload').fileupload({
            dropzone: $("#fileupload"),
            dataType: 'json',
            add: function (e, data) {
                data.context = $('<p/>').html(""+
                  "<div class='upload_item'> "+
                  "  <div class='progress' style='margin-bottom:5px;'>"+
                  "    <div class='bar' style='width: 0%'></div>"+
                  "  </div>"+
                  "  <div class='text'><i class='fa fa-spinner fa-spin'></i> Uploading \"" + 
                  data.files[0].name +
                  "\"...</div>"+
                  "</div>").prependTo($("#upload_items"));
                data.submit();
            },
            done: function (e, data) {
                data.context.find('.text').html("<i class='fa fa-check'></i> Upload of \""+
                data.files[0].name +
                "\" finished.");
                //setTimeout(function() {
                //  data.context.slideUp()
                //}, 5000)
            },
            progress: function (e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                console.log(progress)
                data.context.find(".progress .bar").css(
                    'width',
                    progress + '%'
                ).text(progress + " %");
            },
            progressall: function (e, data) {
              var progress = parseInt(data.loaded / data.total * 100, 10);
              if(progress == 100)
                window.location = window.location
            }
        });
       
        $(document).bind('dragover', function (e) {
          var dropZone = $('#dropzone'),
              timeout = window.dropZoneTimeout;
          if (!timeout) {
              dropZone.addClass('in');
          } else {
              clearTimeout(timeout);
          }
          var found = false,
              node = e.target;
          do {
              if (node === dropZone[0]) {
                  found = true;
                  break;
              }
              node = node.parentNode;
          } while (node != null);
          if (found) {
              dropZone.addClass('hover');
          } else {
              dropZone.removeClass('hover');
          }
          window.dropZoneTimeout = setTimeout(function () {
              window.dropZoneTimeout = null;
              dropZone.removeClass('in hover');
          }, 100);
        });

      });