废话不多说，直接上代码：
<body>
<input type="file" name="file" class="fileBtn" onchange="showPreview(this)" onmouseover="showImg()" onmouseout="hideImg()"/>
<span class="btn-text" id="pic">选择图片</span>
<div class="view-box" id="viewBox">
<img id="preview" width=300/>
</div>
<script type="text/javascript">
function showPreview(source){
var file = source.files[];
if(!file){
alert('请先上传图片');
}
if (file.type == "image/jpeg" || file.type == "image/png") {
if(window.FileReader){
var fr = new FileReader();
fr.onloadend = function(e){
var img = new Image();
img.src=e.target.result;
imgWidth = img.width;
imgHeight = img.height;
imgSize = file.size;
if(judgeImg(imgWidth,imgHeight,imgSize)){ //检测图片尺寸
document.getElementById('pic').innerHTML=file.name;
document.getElementById('preview').src=e.target.result;
doUploadFile(file,imgWidth, imgHeight, imgSize)//与服务器交互
};
}
fr.readAsDataURL(file);
}
}else{
alert('文件格式有误');
}
}
function judgeImg(imgWidth,imgHeight,imgSize){
if(imgWidth>){alert('这里对图片宽度进行限定');return;}
if(imgHeight>){alert('这里对图片高度进行限定');return;}
if(imgSize>*){alert('这里对图片尺寸进行限定');return;}
return true;
}
function doUploadFile(file,width, height, fileSize){
var form = new FormData();
form.append("fileName", file.name); // 可以增加表单数据
form.append("fileSize", file.size); // 可以增加表单数据
form.append("file", file);
var req = new XMLHttpRequest();
req.open("post", imgUrl);
req.send(form);
req.onreadystatechange = function () {
if (req.readyState == && req.status == ) {
var data = JSON.parse(req.responseText);
if (data.errorCode == ) {
//上传图片成功
} else {
//上传图片失败
}
}
};
}
function showImg(){
if(document.getElementById('preview').src){
document.getElementById('viewBox').style.opacity=;
}
}
function hideImg(){
document.getElementById('viewBox').style.opacity=;
}
</script>
<style>
.fileBtn{
opacity:;
position:relative;
z-index:;
cursor:pointer }
.btn-text{
position:relative;
color:green;
left:-px;
}
.view-box{
width:px;
border:solid px #ccc;
opacity:;
}
</style>
</body>
![【每日一练】59—写一个中秋月饼的响应式卡片[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)