[英]How to dynamically set background image url in CSS using Javascript
I've been trying to make this work for a little while now. 我一直在努力使这项工作一段时间。
I thought the following code would work since I'm getting the value from the input and setting the background-image URL to said value. 我认为以下代码将起作用,因为我从输入中获取了值并将背景图像URL设置为所述值。
Thanks! 谢谢!
The code inside of the head tag. head标签内部的代码。
<script type="text/javascript">
function loadImg() {
var imageUrl = $('#hostImage').attr('value')
document.getElementById("upload-success-bg").style.backgroundImage=imageUrl
}
</script>
<style>
#upload-success-bg {
background-image: url();
}
</style>
Input field code 输入域代码
<div class="status">
<input class="image-url" type="text" id="hostImage" name="hostImage" required="true"
value="URL LOADS HERE">
</div>
Where I would like to the image to show 我想在哪里显示图片
<div class="dropzone upload-success" id="upload-success-bg">
<div class="info"><p>Drag image file here</p><p>Or click here to select image</p></div>
<input type="file" required="" class="input" accept="image/*"></div>
如果您希望将URL用于backgound
background-color
和background-color
CSS属性,则即使在JavaScript中也必须使用url()
语法,因此将代码更改为以下内容应该可以:
document.getElementById("upload-success-bg").style.backgroundImage = "url(" + imageUrl + ")"
In jquery, you can do it this way: 在jquery中,您可以这样操作:
function loadImg() {
var imageUrl = $('#hostImage').attr('value')
$("#upload-success-bg").css("background-image", "url(" + imageUrl + ")");
}
A File
object does not have a URL property. File
对象没有URL属性。 A Blob URL
or data URL
can be created which points to the uploaded file. 可以创建指向已上传文件的
Blob URL
或data URL
。 A Blob URL
s lifetime is linked to the document
which created the URL. Blob URL
的生存期链接到创建URL的document
。 A data URL
string data URL
字符串
data:[<mediatype>][;base64],<data>
can be opened at a different window
or browser. 可以在其他
window
或浏览器中打开。
You can use FileReader
to convert File
object to a data URL
and set the <input type="text">
value
to the FileReader
instance result
. 您可以使用
FileReader
将File
对象转换为data URL
,并将<input type="text">
value
设置为FileReader
实例result
。
const input = document.querySelector("#file"); const [label] = input.labels; const upload = document.querySelector("#upload-success-bg"); const uploadURL = document.querySelector("#hostImage"); const reader = new FileReader(); reader.addEventListener("load", e => { const {result} = reader; upload.style.backgroundImage = `url(${result})`; hostImage.style.width = `calc(${result.length}px)`; hostImage.value = result; }); input.addEventListener("change", e => { const [file] = input.files; console.log(file) if (file && /^image/.test(file.type)) { reader.readAsDataURL(file); } });
#file { display: none; } label[for="file"] { white-space: pre; }
<div class="dropzone upload-success" id="upload-success-bg"> <label class="info" for="file"> Drag image file here Or click here to select image </label> <input type="file" required="" id="file" class="input" accept="image/*"></div> <div class="status"> <input class="image-url" type="text" id="hostImage" name="hostImage" required="true" readonly="true" value="URL LOADS HERE"> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.