5分钟学会js上传图片校验图片格式、大小、尺寸宽高

js上传图片校验图片格式、大小、尺寸宽高

一、前言

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 ~ ~ ~写到这里，就写完了，如果有幸帮助到你，请记得关注我，共同一起见证我们的成长。

5分钟学会js上传图片校验图片格式、大小、尺寸宽高相关推荐

javascript 快速获取图片实际大小的宽高
javascript 快速获取图片实际大小的宽高简陋的获取图片实际宽高的方式 // 图片地址 var img_url = '13643608813441.jpg'// 创建对象 var img = ...
java 校验图片的大小，和比例尺寸
一.file文件校验像素,比例,大小 import java.awt.image.BufferedImage; import java.io.File; import java.io.IOExcept ...
java验证图片大小_java 校验图片的大小、尺寸、比例
import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; import javax.i ...
java 校验图片的大小、尺寸、比例
import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException;import javax.im ...
JAVA校验图片的大小、尺寸、比例
校验图片的大小.尺寸.比例上传图片除了基本得大小校验之外,特殊还需要对图片得尺寸像素,像素比例进行校验 ,下边是相关校验 1 尺寸校验,也就是图片得像素 ,是否满足规定得大小 /*** .* @ ...
ffmpeg 视频格式转换和宽高转换制作自己想要的数据格式
ffmpeg 视频格式转换和宽高转换制作自己想要的数据格式命令如下: ffmpeg -y -i Titanic.mkv -s 640*480 out.h264 运行效果: 一般的使用 ffmpe ...
html 图片保持长宽比,实现图片在页面中宽高一直保持16：9比例的方法
实现图片在页面中宽高一直保持16:9比例的方法发布时间:2020-08-31 14:25:10 来源:亿速云阅读:133 作者:小新小编给大家分享一下实现图片在页面中宽高一直保持16:9比例的方 ...
Java BufferImage图片处理（获取宽高、图片截取、转换灰度图）
Java BufferImage图片处理(获取宽高.截取.转换灰度图) 1. 效果图 2. 源码参考这篇博客将介绍如何使用Java读取图片为byte[]数组,或者BufferedImage及互相转 ...
图片圆角边框自适应宽高（深夜原创）
最近挺忙,没来得及更新博客!夜深了,给大家分析下几种图片圆角边框自适应宽高在不同情况下代码实现方法.请先看如下代码: <!DOCTYPE html> <head> <me ...

5分钟学会js上传图片校验图片格式、大小、尺寸宽高

js上传图片校验图片格式、大小、尺寸宽高

5分钟学会js上传图片校验图片格式、大小、尺寸宽高相关推荐

最新文章

热门文章