Question

我有这个属性

<div class="idfake" style="  background-image: url('images/ad.jpg')";>

我希望得到＆＃34; style＆＃34;这是images / ad.jpg

使用JQuery我试过这个

$('.idfake').attr('style', e.target.result);

不起作用。我这样做，所以我可以改变div的背景图片......这是我的代码

<script>
        //change card background pic
        function readURLx(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('.idfake').attr('style', e.target.result);
                }

                reader.readAsDataURL(input.files[0]);
            }
        }
          $("#logopic12").change(function(){
            readURLx(this);
        });
</script>

<input   accept="image/*" id="logopic12"  class="changebg" type="file" name="logo">

Answer 1

试试这个

<script>
        //change card background pic
        function readURLx(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('.idfake').css('background-image', 'url(' + e.target.result + ')');
                }

                reader.readAsDataURL(input.files[0]);
            }
        }
          $("#logopic12").change(function(){
            readURLx(this);
        });
</script>

<input   accept="image/*" id="logopic12"  class="changebg" type="file" name="logo">

Answer 2

或者使用img背景的替代方案

<img src="blank.png" id="idfake" style="width:100%;height:100%;position:absolute;z-index:-1;">

  $(document).on("ready", function()
  {
    $("#logopic12").change(function()
    {
        console.log($(this)[0].files[0]);
        $("#idfake").attr('src', window.URL.createObjectURL($(this)[0].files[0]));
    });
  })

Jquery改变div背景图片

2 个答案: