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

如果您希望为backgound和background-color CSS属性使用URL，则即使在JavaScript中，也必须使用url()语法，因此将代码更改为以下内容应该可以： / p>

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实例{{1 }}。

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

如何使用Javascript在CSS中动态设置背景图片网址

3 个答案: