效果：
上传图片.gif
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>js上传文件</title>
<link rel="stylesheet" href="css/test2.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
//图片类型验证
function verificationPicFile(file) {
var fileTypes = [".jpg", ".png"];
var filePath = file.value;
//当括号里面的值为0、空字符、false 、null 、undefined的时候就相当于false
if (filePath) {
var isNext = false;
var fileEnd = filePath.substring(filePath.indexOf("."));
for (var i = 0; i < fileTypes.length; i++) {
if (fileTypes[i] == fileEnd) {
isNext = true;
break;
}
}
if (!isNext) {
alert('不接受此文件类型');
file.value = "";
return false;
}
} else {
return false;
}
var fileSize = 0;
var limitSize = 259;
var fileMaxSize = limitSize * 1024; //图片大小
var filePic = file.files[0];
if (filePath) {
fileSize = filePic.size / 1024;
var size = fileSize;
console.log('fileSize', fileSize);
console.log('filePath', filePath);
if (size > fileMaxSize) {
alert("文件大小不能大于200！");
file.value = "";
return false;
} else if (size <= 0) {
alert("文件大小不能为0M！");
file.value = "";
return false;
}
var reader = new FileReader();
reader.onload = function(e) {
var data = e.target.result;
//加载图片获取图片真实宽度和高度
var image = new Image();
image.onload = function() {
var width = image.width;
var height = image.height;
console.log('width', width);
console.log('height', height);
if (width < 300 | height < 300) {
alert("文件尺寸符合！");
var upLoad = $('#upLoad');
upLoad.attr('src', data);
} else {
alert("文件尺寸应为：300*300！");
file.value = "";
return false;
}
};
image.src = data;
};
reader.readAsDataURL(filePic);
} else {
return false;
}
}
</script>
</head>
<body>
<a href="javascript:;" class="file">选择文件
<input type="file" name="" id="" onchange="verificationPicFile(this)">
</a>
<img id="upLoad" src="" alt="">
</body>
</html>
1.css:
.file {
position: relative;
display: inline-block;
background: #D0EEFF;
border: 1px solid #99D3F5;
border-radius: 4px;
padding: 4px 12px;
overflow: hidden;
color: #1E88C7;
text-decoration: none;
text-indent: 0;
line-height: 20px;
}
.file input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
}
.file:hover {
background: #AADFFD;
border-color: #78C3F3;
color: #004974;
text-decoration: none;
}
