Question

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

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

Iv尝试了这个问题的所有建议的方法，但我不能让它使用这些建议。

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

Answer 1

您必须将""添加到url的{{1}}

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

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

改变html标签的背景图像与Jscript onChange事件

2 个答案: