Drad and drop in asp.net using J-Query

Question

I am using asp.net and i got a requirement where i need to implement drag and drop file upload with progress bar .I don't know where to start so could any one help me out to resolve the issue.
Note :Dont use J-Query plugins
Tnx in advance

Khargesh Rajput · Answer

http://www.codeproject.com/script/Articles/ArticleVersion.aspx?aid=460142&av=669590

Ramesh kumar · Answer

Try this
function sendFileToServer(formData, status) {              var uploadURL = "FileUploadHandler.ashx"; //Upload URL              var extraData = {}; //Extra Data.              var jqXHR = $.ajax({                  xhr: function () {                      var xhrobj = $.ajaxSettings.xhr();                      if (xhrobj.upload) {                          xhrobj.upload.addEventListener('progress', function (event) {                              var percent = 0;                              var position = event.loaded || event.position;                              var total = event.total;                              if (event.lengthComputable) {                                  percent = Math.ceil(position / total * 100);                              }                              //Set progress                              status.setProgress(percent);                          }, false);                      }                      return xhrobj;                  },                  url: uploadURL,                  type: "POST",                  contentType: false,                  processData: false,                  cache: false,                  data: formData,                  success: function (data, textStatus, jqXHR) {                      status.setProgress(100);                    },                  complete: function (data,textStatus, jqXHR) {                      $('.status').html(data.responseText).fadeIn().fadeOut(1600);                    }              });                status.setAbort(jqXHR);          }            var rowCount = 0;          function createStatusbar(obj) {              rowCount++;              var row = "odd";              if (rowCount % 2 == 0) row = "even";              this.statusbar = $(" ");              this.filename = $(" ").appendTo(this.statusbar);              this.size = $(" ").appendTo(this.statusbar);              this.progressBar = $(" ").appendTo(this.statusbar);              this.abort = $(" cancel ").appendTo(this.statusbar);              obj.after(this.statusbar);                this.setFileNameSize = function (name, size) {                  var sizeStr = "";                  var sizeKB = size / 1024;                  if (parseInt(sizeKB) > 1024) {                      var sizeMB = sizeKB / 1024;                      sizeStr = sizeMB.toFixed(2) + " MB";                  }                  else {                      sizeStr = sizeKB.toFixed(2) + " KB";                  }                    this.filename.html(name);                  this.size.html(sizeStr);              }              this.setProgress = function (progress) {                  var progressBarWidth = progress * this.progressBar.width() / 100;                  this.progressBar.find('div').animate({ width: progressBarWidth }, 10).html(progress + "% ");                  if (parseInt(progress) >= 100) {                      this.abort.hide();                  }              }              this.setAbort = function (jqxhr) {                  var sb = this.statusbar;                  this.abort.click(function () {                      jqxhr.abort();                      sb.hide();                  });              }          }          function handleFileUpload(files, obj) {              for (var i = 0; i                  var fd = new FormData();                  fd.append('file', files[i]);                    var status = new createStatusbar(obj); //Using this we can set progress.                  status.setFileNameSize(files[i].name, files[i].size);                  sendFileToServer(fd, status);                }          }          $(document).ready(function () {              var obj = $("#dragandrop");              obj.on('dragenter', function (e) {                  e.stopPropagation();                  e.preventDefault();                  $(this).css('border', '2px solid #0B85A1');                });              obj.on('dragover', function (e) {                  e.stopPropagation();…