如何使用Javascript在CSS中動態設置背景圖片網址

Question

我一直在努力使這項工作一段時間。

我認為以下代碼將起作用，因為我從輸入中獲取了值並將背景圖像URL設置為所述值。

謝謝！

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>

輸入域代碼

<div class="status">

 <input class="image-url" type="text" id="hostImage" name="hostImage" required="true" 
 value="URL LOADS HERE">

</div>

我想在哪里顯示圖片

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

Answer 1

如果您希望將URL用於backgound background-color和background-color CSS屬性，則即使在JavaScript中也必須使用url()語法，因此將代碼更改為以下內容應該可以：

document.getElementById("upload-success-bg").style.backgroundImage = "url(" + imageUrl + ")"

Answer 2

在jquery中，您可以這樣操作：

 function loadImg() {

  var imageUrl = $('#hostImage').attr('value')

  $("#upload-success-bg").css("background-image", "url(" + imageUrl + ")");

}

Answer 3

File對象沒有URL屬性。 可以創建指向已上傳文件的Blob URL或data URL 。 Blob URL的生存期鏈接到創建URL的document 。 data URL字符串

data:[<mediatype>][;base64],<data>

可以在其他window或瀏覽器中打開。

您可以使用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>