通过文件输入更改背景图像 [英] Change a background image through a file input

查看：90
本文介绍了通过文件输入更改背景图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

  $（ function（）{
 $（'＃verborgen_file'）。hide（）; 
 $（'＃uploadButton'）。on（'click'，function（）{
 $（' （'click'）; 
}）; 
}）;

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



我已经尝试了很多东西，但事先并未得到它的工作，谢谢！



---- EDIT- ---



我试过这个：

$ $ $ $ $（code $ #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;宽度：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 =按钮value =上传id =uploadButton/>< br>< br>< div id =pf_foto>< / div>


My question is how to change the background-image of a div to an image selected by an input file element. The file-input is hidden and executed when the user of the site clicks on another input element here is that code:

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

So the file-input is #verborgen_file and the other input is #uploadButton now I'm looking for a way that when the user clicks on #uploadButton and therefore triggers #verborgen_file and choses an image (and only an image) the background-image of the div #pf_foto changes to that chosen image.

I have try'd a lot of things but just couldn't get it to work so in advance Thank You!

----EDIT----

i try'd this:

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

解决方案

Take a look to the following code snippet. Hope this will help you.

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

这篇关于通过文件输入更改背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆