用javascript选择后显示图像

Question

我在选择图像后制作了用于显示图像的 JS。这是代码

html代码

<input type="file" id="file_photo" onchange="preview_image(event)" name="item_image"  ></input>
<img id='output_image'/>

JS代码

function preview_image(event){

    document.getElementById('output_image').style.display='block';
    var reader = new FileReader();
    reader.onload = function(){
        var output = document.getElementById('output_image');
        output.src = reader.result;
    }
    reader.readAsDataURL(event.target.files[0]);
};

显示成功。但问题是，我可以把输出图片放在 css url 背景图片中吗？

如果html是这样的。

<label for="file_photo" class="file">  
   <div class="camera_icon" style="background: url() center center no-repeat #d7d7d7;background-size: cover;">
         <img src="/public/img/stock/icon07.png">
         <img src="/public/img/stock/icon06.png" class="plus_icon">
    </div>
    <input type="file" id="file_photo" onchange="preview_image(event)" name="item_image"  ></input>
 </label>

我可以将输出图像放入

style="background: url() center center no-repeat #d7d7d7;background-size: cover;"

因为我需要关注css文件。

Answer 1

这是一个适合你的朋友：http://jsfiddle.net/qvxg6ok4/12/

您需要使用从文件控件获取的数据 url 为 div 的背景图像分配一个公式化的 URl 属性。

output.style.backgroundImage = "url('" + reader.result + "')"

这个小提琴是用类名搜索：http://jsfiddle.net/qvxg6ok4/14/

Answer 2

您需要拥有要应用的图像的路径/src。

然后您可以使用以下代码

document.getElementById('camera_icon').style.backgroundImage="url({{images/img.jpg}})";

尝试使用这个小提琴http://jsfiddle.net/LvsYc/15724/

    <label for="file_photo" class="file">  
   <div class="camera_icon" id="camera_icon">
         <img src="/public/img/stock/icon07.png">
         <img src="/public/img/stock/icon06.png" class="plus_icon">
    </div>
    <input type="file" id="file_photo" name="item_image"  ></input>
 </label>
    <style>
    .camera_icon {
  background-repeat: no-repeat;
  background-size: cover;
  background-color:#d7d7d7;
  background-position: center center;
  height:300px;
}
    </style>
    <script>
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                //$('#blah').attr('src', e.target.result);
                document.getElementById('camera_icon').style.backgroundImage="url( " + e.target.result + ")";
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

    $("#file_photo").change(function(){
        readURL(this);
    });
    </script>

Answer 3

你有没有这样尝试过，

function preview_image(event){

document.getElementsByClassName('camera_icon').style.display='block';
var reader = new FileReader();
reader.onload = function(){
    var output = document.getElementsByClassName('camera_icon');
    output.style.backgroundImage= reader.result;
}
reader.readAsDataURL(event.target.files[0]);
};

使用背景图片代替图片的src