fileUpload.js DEMO

see: https://github.com/Pamblam/fileUpload

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdn.rawgit.com/Pamblam/fileUpload/master/fileUpload.js"></script>
<div id="dropZone">
  <p>
  Drag an image file here, or <a href="javascript: void 0;" id="fileBtn">click here</a>.
  </p>
  <small><i>Accepts PNG, GIF, & JPG</i></small>
</div>
<div id="preview"></div>

CSS

*{font-family: Avant Garde,Avantgarde,Century Gothic,CenturyGothic,AppleGothic,sans-serif; text-decoration:none;}

#dropZone{
  border: 3px dashed #52CAF2;
  background: #8BD7F0;
  width: 300px;
  height: 100px;
  text-align: center;
  border-radius: 1em;
}

img{ width:300px; }

.dragover{
  background: #F7FBFC !important;
}

JavaScript

$("#fileBtn").fileUpload({
  accept: "image/gif, image/png, image/jpeg, .png, .gif, .jpg",
  dragArea: "#dropZone",
  dragEnterClass: "dragover",
  change: function(){
    $("#preview").html("Loading...");
    $("#fileBtn").fileUpload("getDataURI", function(dataURI){
      $("#preview").html("<b>Your image: </b><br><img src='"+dataURI+"' />");
    }); 
  }
});