使用 Javascript onChange 事件更改 html 标签的背景图像答案

【问题标题】：Alter Background image of a html lable with Jscript onChange event使用 Javascript onChange 事件更改 html 标签的背景图像
【发布时间】：2018-06-17 12:12:32
【问题描述】：

为什么这不起作用，我没有定义 url。Any1 有任何想法如何解决这个问题。

我希望选择的文件图像填充 labals 图像并在那里显示，但它不会这样做。

我尝试了这个问题的所有建议方法，但我无法让它与这些建议一起工作。

<div class='bigimage'>
    <label id='img00' style="position:absolute; top:0; left:0; width:100%; height:100%; background-image:url('<?php echo $i0url ?>'); background-size:cover; background-repeat:no-repeat;" >
        <input type='file'  id='sellimage1' name='sellimage1'  style='display:none;' onchange='addimg0(this);' accept='image/*' required />
    </label>        
</div>

<script>
function addimg0(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                document.getElementById('img00').style.backgroundImage=url(e.target.result);   

            };

            reader.readAsDataURL(input.files[0]);
        }
    }
</script>

【问题讨论】：

您的代码应该正确缩进，如果有人为您完成了修改，您应该接受。

标签： html css onchange jscript

【解决方案1】：

您必须将"" 添加到url of background-image

 document.getElementById('img00').style.backgroundImage="url("+e.target.result+")";

function addimg0(input) {
   if (input.files && input.files[0]) {
      var reader = new FileReader();
      reader.onload = function (e) {
       document.getElementById('img00').style.backgroundImage="url("+e.target.result+")";
            };
            reader.readAsDataURL(input.files[0]);
        }
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='bigimage'>
    <label id='img00' style="position:absolute; top:0; left:0; width:100%; height:100%; background-image:url('<?php echo $i0url ?>'); background-size:cover; background-repeat:no-repeat;" >click here
        <input type='file'  id='sellimage1' name='sellimage1'  style='display:none;' onchange='addimg0(this);' accept='image/*' required />
    </label>        
</div>

【讨论】：

@MelissaHicking 告诉我你的意思

【解决方案2】：

您的代码出现控制台错误：

(index):52 Uncaught ReferenceError: url is not defined
    at FileReader.reader.onload ((index):52)

目前您正在将 url 作为函数执行，而不是将其视为字符串。要解决这个问题，请将 onload 函数的代码更改为：

document.getElementById('img00').style.backgroundImage = 'url(' + e.target.result + ')';

您可以在这里使用 ES6 字符串文字来构造 backgroundImage 属性，如下所示：

document.getElementById('img00').style.backgroundImage = `url(${e.target.result})`;

但是您需要添加 babel-plugin 以将 ES6 转换为 ES5。

【讨论】：