jquery – 通过文件输入更改背景图像

我的问题是如何将div的背景图像更改为由输入文件元素选择的图像.当站点用户点击另一个输入元素时,隐藏并执行文件输入是该代码：

$(function(){
  $('#verborgen_file').hide();
  $('#uploadButton').on('click',function(){
    $('#verborgen_file').trigger('click');
  });
});

所以文件输入是#verborgen_file而另一个输入是#uploadButton现在我正在寻找一种方法,当用户点击#uploadButton并因此触发#verborgen_file并选择一个图像(并且只有一个图像)时,背景图像div #pf_foto更改为所选图像.

我已经尝试了很多东西,但是无法让它工作所以提前谢谢！

– – 编辑 – –

我试过这个：

$("#verborgen_file").on("change", function(){

    var files = !!this.files ? this.files : [];
    if ( !files.length || !window.FileReader ) return;
    if ( /^image/.test( files[0].type ) ) {
        var reader = new FileReader();
        reader.readAsDataURL( files[0] );
        reader.onloadend = function(){
            $("#pf_foto").css("background-image", "url(" + this.result + ")");
        }
    }
});

请查看以下代码段.希望这会帮助你.

$('#verborgen_file').hide();
        $('#uploadButton').on('click', function () {
              $('#verborgen_file').click();
        });

        $('#verborgen_file').change(function () {
            var file = this.files[0];
            var reader = new FileReader();
            reader.onloadend = function () {
               $('#pf_foto').css('background-image', 'url("' + reader.result + '")');
            }
            if (file) {
                reader.readAsDataURL(file);
            } else {
            }
        });

#pf_foto {
        background-image: url('');
        background-size: cover;
        background-position: center;
        height: 200px;
        width: 200px;
        border: 1px solid #000;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='file' id='verborgen_file' />
<input type="button" value="Upload" id="uploadButton" />
<br>
<br>
<div id="pf_foto"></div>