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

你试过这个吗，

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

Answer 2

这是你的伴侣：http://jsfiddle.net/qvxg6ok4/12/

您需要为div的背景图像分配一个公式化的URl属性，以及从文件控件中获取的数据URL。

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

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

Answer 3

您需要为要应用的图像设置路径/ src。

然后您可以使用以下代码

的document.getElementById（＆＃39; camera_icon＆＃39）。style.backgroundImage =＆＃34; URL（{{图像/ img.jpg}}）＆＃34 ;;

尝试使用此小提琴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>

用javascript选择后显示图像

3 个答案: