Отображение изображения после выбора с помощью 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 of image