如何使用jQuery从电脑上传图片文件并设置为div背景图片

图片文件输入的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的背景色初始设置为白色。此外，我不想使用服务器，因为我的意图是保持它作为客户端唯一的应用程序。

这可能会解决你的问题

JS FIDDLE

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

这是一个不使用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 + ')'); }
解释- URL. createobjecturl()静态方法创建一个DOMString，其中包含一个URL，表示parameter中给定的对象。

var loadFile = function(event) { var output = document.getElementById('output'); output.style.backgroundImage= "url("+URL.createObjectURL(event.target.files[0])+")"; };
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <body> <input type="file" accept="image/*" onchange="loadFile(event)"> <div style="width: 500px;height: 500px;" id="output"></div> </body> </html>

相关内容

最新更新

热门标签：