Question

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

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

所以文件输入是#verborgen_file而另一个输入是#uploadButton现在我正在寻找一种方法，当用户点击#uploadButton并因此触发#verborgen_file并选择一个图像（并且只有一个图像））div的背景图像#pf_foto会变为所选图像。

我尝试过很多事情，但事先没有办法让它工作，所以提前谢谢！

---- ---- EDIT

我尝试了这个：

$("#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 + ")");
        }
    }
});

Answer 1

查看以下代码段。希望这会对你有所帮助。

＆＃13;

$('#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 {
            }
        });

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: