通过文件输入更改背景图像答案

【问题标题】：Change a background image through a file input通过文件输入更改背景图像
【发布时间】：2016-03-11 04:45:53
【问题描述】：

我的问题是如何将 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 + ")");
        }
    }
});

【问题讨论】：

那么你尝试了什么？这可以帮助你：stackoverflow.com/questions/4459379/…
尝试reader.onload 而不是reader.onloadend

标签： jquery html css input

【解决方案1】：

看看下面的代码sn-p。希望这会对你有所帮助。

$('#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>

【讨论】：