jQuery Image Drag and Drop

Posted by On 4月 28, 2016 0 Comment

Sample

This sample is drag and drop image and show it in image tag.
Prevent default drag and drop on page.
And add FileReader to read image file and finally, add fileurl to image src.

JavaScript

index.js

$(function(){
   $(document).on('dragover', function(event){
        event.stopPropagation();
        event.preventDefault();
    });

    $(document).on('drop', function(event){
        event.stopPropagation();
        event.preventDefault();
    });

    $("#dropimage").on('drop', function(event){
        if (event.originalEvent.dataTransfer.files != null) {
           var files = event.originalEvent.dataTransfer.files;
           var file = files[0];
           var reader = new FileReader();
           reader.onload = function(e){ 
               dataurl = e.target.result;
               $("#image").attr('src', dataurl);
           });
           reader.readAsDataURL(file);
        }
    });
});

HTML and CSS

I use bootstrap for div table
HTML

<html>
<head>
	<title>Drag and Drop</title>
	<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/index.css">
        <script src="bower_components/jquery/dist/jquery.min.js"></script>
        <script src="js/index.js"></script>
</head>
<body ng-app="appModule" ng-controller="appController">
<div class="container">
	<div class="row">
      <div class="col-md-6">
        <h3>Image(Drag and Drop)</h3>
      </div>
      <div class="col-md-6">
        <h3>Preview</h3>
      </div>
  </div>
  <div class="row">
  		<div class="col-md-6">
  			<div id="dropimage">
  			</div>
  		</div>
  		<div class="col-md-6">
  			<img id="image"></img>
  		</div>
	</div>
  <h3>Results</h3>
</div>
</body>
</html>

CSS

#dropimage {
	width: 100%;
	height: 500px;
	border: 1px dashed #f00;
}

Result

TOPICS