我正在尝试使用 允许用户上传将用作背景的图像。我不知道是否需要获取文件的完整路径。
这是我尝试使用的输入:
这是与输入关联的 JavaScript
背景 = selectBackground.value; document.body.style.background = "#4d3325 url('" + background + "')无重复中心中心固定"; document.body.style.backgroundSize = "自动 100%";
背景根本没有改变,当我尝试将其显示为常规图像时,它只显示一个小图像图标。
P粉1342887942023-09-09 12:19:27
嗨朋友,请检查此解决方案是否满足您的需求:
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>
P粉8212313192023-09-09 09:38:53
使用 URL.createObjectURL()
通过使用此功能,上传的图像文件将转换为对象 url。
最后,当我们更改其他图像时,我们应该使用 URL.revokeObjectURL()
从内存中删除旧的 url,以便更好地管理内存。
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)">