一、前言
js上传图片校验图片格式、大小、尺寸宽高。
在此记录下，分享给大家。
二、代码
<input type="file" id="imgFile" name="imgFile" onchange="checkImages(this, 2019, 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 ~ ~ ~写到这里，就写完了，如果有幸帮助到你，请记得关注我，共同一起见证我们的成长。
