提问人：Rachel Christiana 提问时间：5/15/2023 更新时间：5/15/2023 访问量：51
如何使用 HTML 中上传文件中的图像作为背景？
How can I use an image from a file upload in HTML as a background?
问：
我正在尝试允许用户上传将用作背景的图像。我不知道我是否需要获取文件的完整路径。<input type="file">
这是我尝试使用的输入：这是与输入关联的 JavaScript<input type="file" name="selectBackground" id="selectBackground" accept="image/png, image/jpeg">background = selectBackground.value; document.body.style.background = "#4d3325 url('" + background + "')no-repeat center center fixed"; document.body.style.backgroundSize = "auto 100%";
背景根本没有改变，当我尝试将其显示为常规图像时，它只显示一个小图像图标。
答：
0赞
Diego Ferrari Bruno
5/15/2023
#1
嗨，朋友，检查此解决方案是否满足您的需求：
var input = document.getElementById('input');
input.addEventListener('change', readURL, true);
function readURL() {
var file = document.getElementById("input").files[0];
var reader = new FileReader();
reader.onloadend = function() {
var image = new Image();
image.src = reader.result;
image.onload = function() {
document.getElementById("myDiv").style.backgroundImage = "url(" + reader.result + ")";
}
}
if (file) {
reader.readAsDataURL(file);
}
}<div id="myDiv" style="width:200px; height:200px">
<input type="file" id="input" class="custom-file-input" accept=".png, .jpg, .jpeg, .gif .bmp" />
</div>评论
0赞
Yuvaraj M
5/15/2023
您可以使用 URL.createObjectURL（） 方法而不是文件读取器
0赞
Yuvaraj M
5/15/2023
#2
使用 URL.createObjectURL（）
通过使用它，上传的图像文件被转换为对象 url。
最后，当我们更改另一个图像时，我们应该从内存中删除旧的 url，以便使用 .URL.revokeObjectURL()
function file(e){
window.url && URL.revokeObjectURL(window.url);// release memory
const f = e.target.files[0];
let url = URL.createObjectURL(f);
window.url = url;
document.getElementsByClassName('container')[0].style.backgroundImage = `url(${url})`;
}.container{
width: 100px;
height: 100px;
border: 1px solid lightgrey;
margin: 10px;
background-size: contain;
background-repeat: no-repeat;
} <div class='container'></div>
<input type='file' accept=".png, .jpg, .jpeg, .gif .bmp" onchange="file(event)">
评论