Javascript 我有一个显示用户的图像元素'；s当前配置文件图像。我可以将该图像的src更改为文件输入中的图像吗？

正如您在下面的代码中看到的，我有一个image元素，它显示用户当前的配置文件图像。我想知道是否可以将图像元素的

src='

更改为将存储在

input

中的图像，并使用

type='file'

？这是在文件被上传到文件服务器之前

<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>

image\u file\u name）}>
上传一个新的头像

这个问题以前被问过很多次。在这里，看一看：

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);
});

---

参考资料：

是的，你可以！这里有一个有点相关的问题：

您的问题的相关答案如下：

它有一些预览代码，你可以从中获得灵感：

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 = "";
  }
}

它的工作原理

当用户将文件上传到表单输入中时，该文件在所述输入的

文件

属性中可用。这是一个数组，因为

文件

输入可以处理多个文件

如果只允许上载一个文件，则可以安全地使用

文件[0]

---

该类包含读取文件并将其内容作为数据url返回的方法。此数据url可以插入到

属性中进行渲染。
示例还显示了如何验证mime。通过运行snippet来尝试它


constfileinput=document.getElementById（'input'）；
const image=document.getElementById（'image'）；
fileInput.addEventListener（'change'，addImage）；
函数addImage（事件）{
const file=event.target.files[0]；
//确保它是图像
常量[mime]=file.type.split（'/'）；
如果（mime！=“图像”）{
fileInput.value=''；
返回；
};
const reader=new FileReader（）；
reader.addEventListener（'load'，（）=>{
//reader.result是base64编码的字符串
image.src=reader.result；
});
reader.readAsDataURL（文件）；
}
#图像{
最大宽度：300px；
}
参见示例。您应该使用
filereader
来做您想做的事情。我可能会问，为什么我会得到“未捕获的引用错误：readURL未在HTMLInputElement.onchange中定义”，即使函数正在工作并更改image元素中的src？