what2watch/scss/plugins/dropimage/test.html
2023-09-21 17:43:18 -07:00

34 lines
942 B
HTML

<h2 id="dropimage">Dropimage</h2>
<div class="flex three">
<div>
<label class="dropimage" style="background-image: url('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>