js上传图片校验图片格式、大小、尺寸宽高
一、前言
js上传图片校验图片格式、大小、尺寸宽高。
在此记录下，分享给大家。
二、代码
<input type="file" id="imgFile" name="imgFile" onchange="checkImages(this, , 1031, 'setImagePreview')" />
/*** 图片上传校验* @param file* @param width* @param height* @param callBackMethod：回调方法* @author yys*/function checkImages(file, width, height, callBackMethod) {if(file.value){/*** 0、参数准备*fileStream：文件流*fileSize：文件大小*fileName：文件名称*/var fileStream = file.files[0];var fileSize = fileStream.size;var fileName = fileStream.name;/*** 1、校验图片格式(png/jpg/git)*/var reg = /\.(git|jpg|jpeg|png|GIF|JPG|PNG)$/;if(!reg.test(fileName)) {alert("图片格式限制[png/jpg/jpeg/git]~~");return;}/*** 2、校验图片大小(2M)*fileSize：单位(B)*/if(fileSize / 1024 > 2048) {alert("图片大小限制[2M]~~");return;}/*** 3、校验图片尺寸*/var reader = new FileReader();reader.onload = function (e) {var data = e.target.result;// 加载图片获取图片真实宽度和高度var image = new Image();image.onload = function() {var realWidth = image.width,realHeight = image.height;if (width != realWidth || height != realHeight){alert("图片尺寸限制[" + width + "*" + height + "]，当前图片尺寸为[" + realWidth + "*" + realHeight + "]~~");return;}else {// 校验通过 - 执行回调方法// setImagePreview - 图片预览等后续操作eval(callBackMethod)();// eval(callBackMethod)(width, height);}};image.src = data;};reader.readAsDataURL(fileStream);}}
Now~~~写到这里，就写完了，如果有幸帮助到你，请记得关注我，共同一起见证我们的成长。
