Javascript 如何从计算机上传图像文件并使用 jQuery 设置为 div 背景图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31353703/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to upload image file from computer and set as div background image using jQuery?
提问by RBk
The HTML code for image file input:
图像文件输入的 HTML 代码：
<input type="file" autocomplete="off" name="background-image" accept="image/*" />
The destination div block where I want to dynamically set the background image:
我要动态设置背景图像的目标 div 块：
<div class="clock"></div>
The jQuery function I'm currently using for setting image file uploaded as div background image:
我目前用于设置上传为 div 背景图像的图像文件的 jQuery 函数：
$(".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.
问题是没有设置背景图像。这可能是因为当我使用浏览器检查器检查时，文件上传不包含文件 url。 注意：.clock 的背景颜色最初设置为白色。此外，我不想使用服务器，因为我的目的是将其保留为仅客户端应用程序。
回答by Malik Naik
This may solve your problem
这可能会解决您的问题
HTML
HTML
<input type='file' id='getval' name="background-image" /><br/><br/>
<div id='clock'></div>
CSS
CSS
#clock{
background-image:url('');
background-size:cover;
background-position: center;
height: 250px; width: 250px;
border: 1px solid #bbb;
}
PURE JAVASCRIPT
纯Java脚本
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{
}
}
回答by Puneet Chawla
It's small way to do this without using FileReader.
这是不使用 FileReader 的小方法。
http://jsfiddle.net/PuneetChawla/vqn7r0nj/
http://jsfiddle.net/PuneetChawla/vqn7r0nj/
HTML
HTML
<input type='file' id='getval' name="background-image" onchange="readURL(event)" /><br/><br/>
<div id='clock'></div>
CSS
CSS
#clock{
background-image:url('');
background-size:cover;
background-position: center;
height: 250px; width: 250px;
border: 1px solid #bbb;
}
JavaScript
JavaScript
function readURL(event){
var getImagePath = URL.createObjectURL(event.target.files[0]);
$('#clock').css('background-image', 'url(' + getImagePath + ')');
}
Explanation - The URL.createObjectURL() static method creates a DOMString containing an URL representing the object given in parameter.
说明 - URL.createObjectURL() 静态方法创建一个 DOMString ，其中包含表示参数中给定对象的 URL。
回答by Gaurav Saini
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>