title: Display Image after drag and drop on html page
body: <p>I am implementing Drag and Drop Images Control using JQuery/JS. What has been accomplished is that user drag some image file and drop into html page. After dropping file, I only show filename and its size. </p>
  
  <p>What I need to display image on the page as well. But I am not able to get image file content in jquery. </p>
  
  <p>Following is code which i have written:</p>
  
  <pre><code>function handleFileUpload(files, obj) {
  for (var i = 0; i &lt; files.length; 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 = $("#dragandrophandler");
  obj.on('dragenter', function (e) {
      e.stopPropagation();
      e.preventDefault();
      $(this).css('border', '2px solid #0B85A1');
  });
  obj.on('dragover', function (e) {
      e.stopPropagation();
      e.preventDefault();
  });
  obj.on('drop', function (e) {
  
      $(this).css('border', '2px dotted #0B85A1');
      e.preventDefault();
      var files = e.originalEvent.dataTransfer.files;
  
      //We need to send dropped files to Server
      handleFileUpload(files, obj);
  });
  $(document).on('dragenter', function (e) {
      e.stopPropagation();
      e.preventDefault();
  });
  $(document).on('dragover', function (e) {
      e.stopPropagation();
      e.preventDefault();
      obj.css('border', '2px dotted #0B85A1');
  });
  $(document).on('drop', function (e) {
      e.stopPropagation();
      e.preventDefault();
  });
  
  });
  </code></pre>
  
  <p>On debugging function <code>handleFileUpload</code>, it only displays following attributes:</p>
  
  <p><img src="https://i.stack.imgur.com/YeV1G.png" alt="enter image description here"></p>
  
  <p>Can you help in this regard?</p>
  
  <p>Thanks</p>