HTML5 Game - Read image from dropped file

Description

Read image from dropped file
Demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Read Image</title>

<style>
#dropBox {/*  w  w w.  j ava2s.  c  o  m*/
  margin: 15px;
  width: 300px;
  height: 300px;
  border: 5px dashed gray;
  border-radius: 8px;
  background: lightyellow;
  background-size: 100%;
  background-repeat: no-repeat;
  text-align: center;
}
 
#dropBox div {
  margin: 100px 70px;
  color: orange;
  font-size: 25px;
  font-family: Verdana, Arial, sans-serif;
}

input {
  margin: 15px;
}
</style>

<script>
let dropBox;

window.onload = function() {
  dropBox = document.getElementById("dropBox");
  dropBox.ondragenter = ignoreDrag;
  dropBox.ondragover = ignoreDrag;
  dropBox.ondrop = drop;
}

function ignoreDrag(e) {
  e.stopPropagation();
  e.preventDefault();
}

function drop(e) {
  e.stopPropagation();
  e.preventDefault();
 
  let data = e.dataTransfer;
  let files = data.files;
   
  processFiles(files);
}


function processFiles(files) {
  let file = files[0];
  let output = document.getElementById("fileOutput");
 
  let reader = new FileReader();
  reader.onload = function (e) {
    dropBox.style.backgroundImage = "url('" + e.target.result + "')";
  };

  reader.readAsDataURL(file);
}

function showFileInput() {
  let fileInput = document.getElementById("fileInput");
  fileInput.click();
} 
</script>
</head>

<body>
<div id="dropBox">
  <div>Drop your image here...</div>
</div>

<input id="fileInput" type="file" onchange="processFiles(this.files)">
<img id="thumbnail">

</body>
</html>
HTML5 Game - Read image from dropped file

Description

Demo

Related Topic
