如何从计算机上传图像文件并使用jQuery设置为div背景图像？ [英] How to upload image file from computer and set as div background image using jQuery?

问题描述

图像文件输入的HTML代码：

 < input type =fileautocomplete =offname = background-imageaccept =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（仅'.jpeg'，'。jpg'，'.png'，'.gif'，'.bmp'格式是允许的。）; 
} 
 else {
 $（。clock）。css（background-image，'url（'+ $（。background> div> input [type = file]）。val（）+'）'）; 
} 
}）; 
  

问题是背景图像没有被设置。这可能是因为当我使用浏览器检查器进行检查时，文件上传不包含文件url。
注意： .clock的背景颜色最初设置为白色。此外，我不想使用服务器，因为我的意图是将其保留为仅客户端应用程序。 / p>

解决方案

这可能会解决您的问题
$ b $ p $ 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; 
} 
  

PURE JAVASCRIPT $ b

  document.getElementById（'getval'）。addEventListener（'change'，readURL，true）; 
函数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 {
} 
} 
  

The HTML code for image file input:

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

The destination div block where I want to dynamically set the background image:

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

The jQuery function I'm currently using for setting image file uploaded as div background image:

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

The issue is that the background-image is not being set. This may possibly be because when I checked with browser inspector, the file upload is not containing file url. Note: The background-color of .clock is set to white initially.Also I'd not like to use a server since my intention is to keep it as client side only application.

解决方案

This may solve your problem

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

PURE 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{
    }
}

这篇关于如何从计算机上传图像文件并使用jQuery设置为div背景图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！