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;}
}

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

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

JavaScript头像图片上传插件支持上传类型大小尺寸验证
一行代码实现头像上传,图片大小.尺寸,类型验证 html调用 <img src="这里放默认头像" id="preview" onclick=" ...
JS获取上传图片的尺寸和大小
最近工作要用到上传文件时限制上传图片大小这个功能,于是开始找类似的文章,看了很多东西,最后结果到也还可以. 目前来说,谷歌,火狐,IE系列的7,8,9都已经过测试,可以获取到上传图片的原尺寸.接下来上 ...
js在上传图片前判断大小
js在上传图片前判断大小这个可以用javascript实现,效果还可以,主要是因为javascript里居然有Image对象,可以取得其属性 <script language=javascri ...
php在苹果手机上传不了图片大小,ThinkPHP后台上传图片无默认尺寸解决方法
原标题:ThinkPHP后台上传图片无默认尺寸解决方法随着网站移动端的日益普及,对后台数据的兼容性要求也越来越高.后台数据涵盖范围不断扩大的同时,使得程序处理能力也必须逐步提高. 使用ThinkPH ...
php上传图片大小判断,jQuery实现判断上传图片类型和大小的方法示例
本文实例讲述了jQuery实现判断上传图片类型和大小的方法.分享给大家供大家参考,具体如下: 这里使用jQuery判断上传图片的类型和大小: 图片格式为: 图片大小为: $(function(){ v ...
基于asp.net + easyui框架，js实现上传图片之前判断图片格式，同时实现预览，兼容各种浏览器+下载...
2019独角兽企业重金招聘Python工程师标准>>> 最近在做图片上传的一个前台页面,上传图片功能虽然很简单,但是需要我们学习的地方很多.在上传图片之前验证图片的格式,并同时实现预 ...
【前端2】js：原始类型，运算符，调试，页面加载，轮播图，Bom（对象，时钟），Dom（全选全不选，省市级联，隔行/触摸换色，表单校验）
文章目录 1.js两种引入:js最终要引入到html在浏览器中运行 2.js五大原始类型:undefined 3.js的运算符和流程控制:js不支持单&和单|性能低 4.案例_99乘法表:So ...
JSP上传图片限制大小像素
原文:https://blog.csdn.net/qq_39200924/article/details/79198766 在项目中经常用到input标签来上传文件,而这些文件通常是图片文件.图片有很 ...
如何查看光驱硬盘托架的尺寸_如何确定光驱位的硬盘托架的大小尺寸和接口
如果你想在电脑光驱位安装固态硬盘,前提必须要确定光驱位硬盘托架的类型,如大小尺寸和接口参数.下面将介绍大家如何确定相关参数,其适合于联想,华硕,惠普等电脑品牌. 1,最合理的确定方法是到Windows ...

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

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

最新文章

热门文章