picnic/src/plugins/dropimage/test.html

A lighweight CSS library with nice defaults and many plugins to kickstart your projects

<h2 id="dropimage">Dropimage</h2>

<div class="flex three">
  <div>
    <label class="dropimage" style="background-image: url('web/img/forest.jpg');">
      <input name="filea" title="Drop image or click me" type="file">
    </label>
  </div>
  <div>
    <label class="dropimage">
      <input name="fileb" title="Drop image or click me" type="file">
    </label>
  </div>
  <div>
    <label class="dropimage">
      <input name="filec" title="Drop image or click me" type="file">
    </label>
  </div>
</div>

<script>
  window.onload = function(){
    [].forEach.call(document.querySelectorAll('.dropimage'), function(img){
      img.onchange = function(e){
        var inputfile = this, reader = new FileReader();
        reader.onloadend = function(){
          inputfile.style['background-image'] = 'url('+reader.result+')';
        }
        reader.readAsDataURL(e.target.files[0]);
      }
    });
  };
</script>