1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > js实现上传图片类型+大小+尺寸验证

js实现上传图片类型+大小+尺寸验证

时间:2021-05-23 14:58:13

相关推荐

js实现上传图片类型+大小+尺寸验证

图片类型+大小+尺寸验证

html代码:

<input type="file" name="files" id="file" onchange="verificationPicFile(this)">

js代码:

//图片类型验证function verificationPicFile(file) {console.log(111)var fileTypes = [".jpg", ".png"];var filePath = file.value;//当括号里面的值为0、空字符、false 、null 、undefined的时候就相当于falseif(filePath){console.log(222)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){console.log(444)alert('不接受此文件类型');file.value = "";return false;}}else {return false;}}//图片大小验证function verificationPicFile(file) {console.log(555)var fileSize = 0;var fileMaxSize = 1024;//1Mvar filePath = file.value;if(filePath){fileSize =file.files[0].size;var size = fileSize / 1024;if (size > fileMaxSize) {alert("文件大小不能大于1M!");file.value = "";return false;}else if (size <= 0) {alert("文件大小不能为0M!");file.value = "";return false;}}else{return false;}}//图片尺寸验证function verificationPicFile(file) {console.log(666)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.onload=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;}}

以上方法和参数根据需要自行修改。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。