<div class="p-imgupload">
    <div id="iamgeArea" class="p-imgupload__area" ondragover="dragover(event)" ondrop="drop(event)">
        <p class="p-imgupload__text">クリックまたは<br>ドラッグ&amp;ドロップ</p>
    </div>
    <div id="imagebox">
    </div>
</div>


<script>
function dragover(e) {
    e.preventDefault();
}

function drop(e) {
  e.preventDefault();
  files = e.dataTransfer.files;
  if(files.length > 1) {
    alert("アップロードできる画像は１枚です。");
    return;
  }
  for (var i=0; i<files.length; i++) {
    if (!files[i] || files[i].type.indexOf('image/') < 0) {
      continue;
    }
    $("#iamgeArea div").remove();
    var fileReader = new FileReader();
    fileReader.onload = function( event ) {
      var loadedImageUri = event.target.result;
      $("<div><img src='"+loadedImageUri+"'></div>").appendTo("#iamgeArea");
      $("#iamgeArea p").hide();
    };
    fileReader.readAsDataURL( files[i] );
  }
  $("#prevbox").after('<button type="button" class="btn btn-success" id="btn" onclick="Upload()">Upload</button>');
}

</script>