上传图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
a{
display: inline-block;
}
.aff{
height: 29px;
padding: 0;
border: 1px solid #ccc;
padding-left: 10px;
}
a.file{
margin: 0 17px 0 6px;
background: #f1f1f5;
width: 83px;
height: 30px;
border:1px solid #e4e4e4;
color: #676a6c;
font-size: 14px;
font-family:"Microsoft Yahei";
position: relative;
display: inline-block;
margin-top: -14px;
top: 0px;
line-height: 30px;
text-align: center;
text-decoration: none;
}
a.file input{
position: absolute;
left: 0;
top: 0;
opacity: 0;
}
.style-logo{
width: 100%;
height: 299px;
background: url("images/logoAddress.png") no-repeat center;
background-size: cover;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="style-logo">
<div class="logo-img">
<img src="images/logo-setting.png" alt="">
</div>
</div>
<input type="text" placeholder="SD-logo.png" readonly="readonly" id="affixName" name="affixName" class="aff"/>
<a href="#" class="file" name="notice">
<input type="file" class="file-btn" placeholder="上传LOGO" name="noticeReport" id="noticeReport" value="上传LOGO"/>上传LOGO</a>
<script src="js/jquery-1.11.3.min.js"></script>
<script>
//上传文件名显示
var file = $('#noticeReport');
aim = $('#affixName');
file.on('change', function( e ){
//e.currentTarget.files 是一个数组，如果支持多个文件，则需要遍历
//以下获取上传文件名不兼容IE浏览器
//var name = e.currentTarget.files[0].name;
var src=e.target || window.event.srcElement;
var filename=src.value;
var name = filename.substring( filename.lastIndexOf('\\')+1 );
aim.val( name );
prec=$('.style-logo');
/*上传图片*/
prevDiv = $('.logo-img');
if (this.files && this.files[0])
{
var reader = new FileReader();
reader.onload = function(evt){
var data=evt.target.result;
var image = new Image();
image.onload=function(){
var width = image.width;
var height = image.height;
if(width>=1920 && height>=290){
prec.css("background","url("+evt.target.result+") no-repeat");
}else{
alert("图片尺寸不低于1920*290像素");
return false;
}
};
image.src= data;
}
reader.readAsDataURL(this.files[0]);
f=this.files[0].size
}
else
{
//prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
//prevDiv.find('img').attr("src",file.value);
prec.css("background","url("+evt.target.result+") no-repeat");
}
});
</script>
</body>
</html>
