Возможно ли показать загруженное изображение в input[type=file]
через js до сохранения его на сайте?
Как бы предпросмотр изображения.
3 ответа
Как я понимаю, вам нужно вот это
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp").change(function() {
readURL(this);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" runat="server">
<input type='file' id="imgInp" />
<img id="blah" src="#" alt="your image" />
</form>
function previewFile() {
var preview = document.querySelector('img');
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.onloadend = function () {
preview.src = reader.result;
}
if (file) {
reader.readAsDataURL(file);
} else {
preview.src = "";
}
}
Гуглится за 5 секунд
document.querySelector("input").addEventListener("change", function () {
if (this.files[0]) {
var fr = new FileReader();
fr.addEventListener("load", function () {
document.querySelector("label").style.backgroundImage = "url(" + fr.result + ")";
}, false);
fr.readAsDataURL(this.files[0]);
}
});
label {
display: inline-block;
width: 8em;
height: 8em;
background: silver;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
input {
display: none;
}
<label for=pct></label>
<input type=file id=pct>