JSFiddle - React, Tailwind, and code Playground

by molily

HTML

<p><input type="file" id="file-input" accept="image/*" multiple></p>
<p id="output1"></p>

<p><input type="button" id="read-file" value="Lesen"></p>
<p id="output2"></p>

JavaScript

(function () {

window.URL = window.URL || window.webkitURL;

function showAndSaveURL(files) {
  if (!files) return;
  for (var i = 0; i < files.length; i++) {
    var file = files[i];
    if (!file.type.match(/image.*/)) continue;
    var url = window.URL.createObjectURL(file);
    console.log(typeof url, url);
    showImage(url, document.getElementById('output1'));
    localStorage.setItem('image', url);
  }
}

function readAndShowURL(files) {
  var url = localStorage.getItem('image');
  console.log(typeof url, url);
  showImage(url, document.getElementById('output2'));
}

function showImage(url, output) {
  var img = document.createElement('img');
  img.src = url;
  img.width = 500;
  output.innerHTML = '';
  output.appendChild(img);
}

document.getElementById('file-input').onchange = function () {
  showAndSaveURL(this.files);
};

document.getElementById('read-file').onclick = readAndShowURL;

})();