input type = file上传图片限制大小、类型、像素

最新推荐文章于 2024-07-19 18:08:01 发布

颜文

最新推荐文章于 2024-07-19 18:08:01 发布

阅读量4.4k

点赞数 3

文章标签： type=file 图片格式图片大小图片尺寸上传图片

本文链接：https://blog.csdn.net/zanyanwen/article/details/88620149

版权

我们常用到input标签来上传图片。图片有很多格式我们只需要其中的几种，就需要对用户上传的文件进行验证，在HTML5中有一个新的属性：accept文件类型限制。但是通常我们会用javascript或jQuery编写方法进行验证图片的大小限制、类型判断、像素判断。

代码如下：

<input type="file" onchange="handleChange(this)">

function handleChange(file) {
    var fileTypes = [".jpg", ".png"];  //我们所需要的图片格式
    var filePath = file.value;
    if (filePath) {
        var filePic = file.files[0];            //选择的文件内容--图片
        var fileType = filePath.slice(filePath.indexOf("."));   //选择文件的格式
        var fileSize = file.files[0].size;            //选择文件的大
        if (fileTypes.indexOf(fileType) == -1) {  //判断文件格式是否符合要求
            alert("文件格式不符合要求！");
            return
        
        if (fileSize > 1024 * 1024) {
            alert("文件大小不能超过1M！");
            return
        
        var reader = new FileReader();
        reader.readAsDataURL(filePic);
        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) {  //判断文件像素
                    //上传图片
                } else {
                    alert("图片尺寸应为：720*1280！");
                    return;
                }
            };
            image.src = data;
        };
    } else {
        return
    }
}