what2watch/scss/plugins/dropimage/test.html

35 lines
942 B
HTML
Raw Normal View History

2023-09-22 00:43:18 +00:00
<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>