Javascript 上载图像文件后不显示Div背景预览
我使用基本的html输入文件上传器上传图像文件，和div'editor-image-1'是上传图像的预览。我试图用下面的代码处理这个图像预览，但是div并没有改变它的背景。正在触发控制台日志“成功”，但未显示图像：Javascript 上载图像文件后不显示Div背景预览,javascript,jquery,image-uploading,Javascript,Jquery,Image Uploading,我使用基本的html输入文件上传器上传图像文件，和div'editor-image-1'是上传图像的预览。我试图用下面的代码处理这个图像预览，但是div并没有改变它的背景。正在触发控制台日志“成功”，但未显示图像： $("#editor-upload-1").change(function() { $('#editor-image-1').css('background', "#FFF"); var file = this.files[0]; var imagefile = file
$("#editor-upload-1").change(function() {
$('#editor-image-1').css('background', "#FFF");
var file = this.files[0];
var imagefile = file.type;
var valid = ["image/jpeg","image/png","image/jpg"];
if(!((imagefile==valid[0]) || (imagefile==valid[1]) || (imagefile==valid[2]))) {
$('#editor-image-1').css('background', "#F00");
alert("Wrong image format");
return false;
} else {
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);
}
});
function imageIsLoaded(e) {
console.log("success");
$('#editor-image-1').css('background', 'url("' + e.target.result + '")');
};
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>functionality</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>
<body>
<style>
.wrapper {
width: 100%;
/* whatever width you want */
display: inline-block;
position: relative;
background-size: contain;
margin: 0 auto;
}
.wrapper:after {
padding-top: 75%;
/* this llama image is 800x600 so set the padding top % to match 600/800 = .75 */
display: block;
content: '';
}
.main {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
color: black;
text-align: center;
margin-top: 5%;
}
</style>
<input type="file" id="editor-upload-1">
<div class="wrapper">
<div class="main" id="main">
</div>
</div>
<script>
$(function(){
$("#editor-upload-1").change(function() {
$('#main').css('background', "#FFF");
var file = this.files[0];
var imagefile = file.type;
var valid = ["image/jpeg","image/png","image/jpg"];
if(!((imagefile==valid[0]) || (imagefile==valid[1]) || (imagefile==valid[2]))) {
$('#main').css('background', "#F00");
alert("Wrong image format");
return false;
} else {
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);
}
});
});
function imageIsLoaded(e) {
console.log("success");
$('#main').css('background', 'url("' + e.target.result + '")');
$('#main').css('top center no-repeat;');
};
</script>
</body>
</html>
功能
.包装纸{
宽度：100%；
/*你想要什么宽度都行*/
显示：内联块；
位置：相对位置；
背景尺寸：包含；
保证金：0自动；
}
.包装工：之后{
垫面：75%；
/*此骆驼图像为800x600，因此将填充顶部%设置为匹配600/800=.75*/
显示：块；
内容：''；
}
梅因先生{
位置：绝对位置；
排名：0；
底部：0；
右：0；
左：0；
颜色：黑色；
文本对齐：居中；
利润率最高：5%；
}
$（函数（）{
$（“#editor-upload-1”）.change（函数（）{
$（'main'）.css（'background'，'FFF'）；
var file=this.files[0]；
var imagefile=file.type；
var valid=[“image/jpeg”、“image/png”、“image/jpg”]；
如果（！（（imagefile==有效[0]）| |（imagefile==有效[1]）| |（imagefile==有效[2]））{
$（'main'）.css（'background'，'F00'）；
警报（“错误的图像格式”）；
返回false；
}否则{
var reader=new FileReader（）；
reader.onload=imagesisload；
reader.readAsDataURL（this.files[0]）；
}
});
});
函数imageIsLoaded（e）{
控制台日志（“成功”）；
$（'#main'）.css（'background'，'url（'+e.target.result+'））；
$（'#main'）.css（'顶部中间不重复；'）；
};
imageIsLoadede.target.result