<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<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 reader = new FileReader();
reader.readAsDataURL(file.files[0]);
reader.onload = function (e) { //成功读取文件
var img = document.getElementById("selectImg");
console.log(e.target.result)
img.src = e.target.result; //或 img.src = this.result / e.target == this
//实现点击下载图片功能
var xmTanDownload = document.getElementById("xmTanDownload");
xmTanDownload.setAttribute("href", e.target.result); //给a标签设置href
};
var fileSize = 0;
var fileMaxSize = 1024;//1M
var filePath = file.value;
if(filePath){
fileSize =file.files[0].size;
var size = fileSize / 1024;
if (size > fileMaxSize) {
alert("文件大小不能大于1M!");
file.value = "";
return false;
}
}else{
return false;
}
}
//图片尺寸验证
//function verificationPicFile(file) {
// var filePath = file.value;
// if(filePath){
// //读取图片数据
// var filePic = file.files[0];
// var reader = new FileReader();
// reader.onload = function (e) {
// var data = e.target.result;
// //加载图片获取图片真实宽度和高度
// var image = new Image();
// image.οnlοad=function(){
// var width = image.width;
// var height = image.height;
// if (width == 720 | height == 1280){
// alert("文件尺寸符合！");
// }else {
// alert("文件尺寸应为：720*1280！");
// file.value = "";
// return false;
// }
// };
// image.src= data;
// };
// reader.readAsDataURL(filePic);
// }else{
// return false;
// }
//}
</script>
</head>
<body>
<input type="file" name="files" id="file" onchange="verificationPicFile(this)">
<img src="" alt="" id="selectImg" width="300px" height="200px">
</body>
</html>
网友评论