As you can see in the code below, I have an image element which displays the user's current profile image. I am wondering would it be possible to change the src=''
of the image element to the image which would be stored in the input
with type='file'
? That is before the file is even uploaded to the file server.
<img class='profile-container-picture' src='{{url("storage/uploads/profile_pictures/edited/".$user->image_file_name)}}'>
<div class="upload-btn-wrapper">
<button class="btn">Upload a new avatar</button>
<input type="file" name="file" />
</div>
This question was asked so many times before. Here, have a look :
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);
});
Reference: Preview an image before it is uploaded
Yes, you can! Here's a somewhat related question: HTML input type=file, get the image before submitting the form
The relevant answer to your question would be this answer: https://stackoverflow.com/a/47688875/3147669
It has some preview code you could use for inspiration:
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 = "";
}
}
How it works
When a user uploads a file into a form input it becomes available inside the files
property of said input. This is an array because a file
input can handle multiple files.
If you're only allowing one file to be uploaded it's safe to use files[0]
.
The FileReader class contains methods to read the file and return it's contents as a data url. This data url can be inserted into an <img />
tag's src
attribute to render.
Vanilla JS example which also shows how to validate mime. Try it by running snippet.
const fileInput = document.getElementById('input'); const image = document.getElementById('image'); fileInput.addEventListener('change', addImage); function addImage(event) { const file = event.target.files[0]; // make sure it's image const [mime] = file.type.split('/'); if (mime != 'image') { fileInput.value = ''; return; }; const reader = new FileReader(); reader.addEventListener('load', () => { // reader.result is base64 encoded string image.src = reader.result; }); reader.readAsDataURL(file); }
#image { max-width: 300px; }
<input type="file" id="input" /> <img id="image" />
Reference: readAsDataURL
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.