[英]I have an image element which displays the user's current profile image. Can I change the src of that image to the image inside the file input?
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'
?我想知道是否可以将 image 元素的
src=''
更改为将存储在type='file'
input
的图像? 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
这是一个有点相关的问题: HTML input type=file, get the image before submit the form
The relevant answer to your question would be this answer: https://stackoverflow.com/a/47688875/3147669你的问题的相关答案是这个答案: 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.当用户将文件上传到表单输入中时,它在所述输入的
files
属性中可用。 This is an array because a file
input can handle multiple files.这是一个数组,因为一个
file
输入可以处理多个文件。
If you're only allowing one file to be uploaded it's safe to use files[0]
.如果您只允许上传一个文件,则使用
files[0]
是安全的。
The FileReader class contains methods to read the file and return it's contents as a data url. FileReader类包含读取文件并将其内容作为数据 url 返回的方法。 This data url can be inserted into an
<img />
tag's src
attribute to render.这个数据 url 可以插入到
<img />
标签的src
属性中进行渲染。
Vanilla JS example which also shows how to validate mime. Vanilla JS 示例也展示了如何验证 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参考: readAsDataURL
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.