如何从计算机上传图像文件并使用jQuery设置为div背景图像？

Question

图像文件输入的HTML代码:

<input type="file" autocomplete="off" name="background-image" accept="image/*" />

我想要动态设置背景图像的目标div块:

<div class="clock"></div>

我正在使用的jQuery函数用于设置上传为div背景图像的图像文件:

$(".background>div>input[type=file]").change(function () {
    var fileExtension = ['jpeg', 'jpg', 'png', 'gif', 'bmp'];
    if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
        alert("Only '.jpeg','.jpg', '.png', '.gif', '.bmp' formats are allowed.");
    }
    else {
        $(".clock").css("background-image",'url("' + $(".background>div>input[type=file]").val() + '")');
    }
});

问题是没有设置背景图像.这可能是因为当我使用浏览器检查器检查时,文件上载不包含文件URL. 注意: .clock的背景颜色最初设置为白色.我也不想使用服务器,因为我的目的是将其保留为仅客户端应用程序.

Answer 1

这可以解决您的问题

JS FIDDLE

HTML

<input type='file' id='getval' name="background-image" /><br/><br/>
<div id='clock'></div>

CSS

#clock{
   background-image:url('');
   background-size:cover;
   background-position: center;
   height: 250px; width: 250px;
   border: 1px solid #bbb;
}

纯粹的JAVASCRIPT

document.getElementById('getval').addEventListener('change', readURL, true);
function readURL(){
   var file = document.getElementById("getval").files[0];
   var reader = new FileReader();
   reader.onloadend = function(){
      document.getElementById('clock').style.backgroundImage = "url(" + reader.result + ")";        
   }
   if(file){
      reader.readAsDataURL(file);
    }else{
    }
}

Answer 2

不使用FileReader就可以做到这一点.

http://jsfiddle.net/PuneetChawla/vqn7r0nj/

HTML

<input type='file' id='getval' name="background-image" onchange="readURL(event)" /><br/><br/>
<div id='clock'></div>

CSS

#clock{
           background-image:url('');
           background-size:cover;
           background-position: center;
           height: 250px; width: 250px;
           border: 1px solid #bbb;
            }

JavaScript的

function readURL(event){
         var getImagePath = URL.createObjectURL(event.target.files[0]);
         $('#clock').css('background-image', 'url(' + getImagePath + ')');
        }

Explanation - URL.createObjectURL()静态方法创建一个DOMString,其中包含表示参数中给定的对象的URL.