js判断图片上传时的文件大小、类型,和宽高尺寸

如何读取图片的size、type

首先,原生input file控件有个files属性,该属性是一个数组。数组中的元素有以下属性:lastModifiedDate,name,size,type,webkitRelativePath,如图: 

这样的话,我们就可以检测到size。

var fileData = file.files[0];
var size = fileData.size;   //注意,这里读到的是字节数
var isAllow = false;
var maxSize = Max_Size;
maxSize = maxSize * 1024;   //转化为字节
isAllow = size <= maxSize;
var type = fileData.type;  //获取文件类型

如何读取图片的宽高

  • 图片真实的宽度和高度,可以通过实例化Image对象、加载src 来获取。
  • 兼容性:IE下使用滤镜来处理图片尺寸控制(没弄懂,暂时不做描述)
  • 实例化Image对象、加载src 来获取图片宽高具体JS代码如下:

   ——实例化Image对象、加载src—— 

   var img = new Image();
    var Max_Size = 2000; //2M
    var Min_Width = 550; //500px

    var url = window.URL || window.webkitURL;
    img.src = url.createObjectURL(file);//预览加载

   var check = function () {
        // 图片实例化加载时,其宽高为0,只要任何一方大于0,表示图片已经加载完成并返回宽高        
        if (img.width > 0 || img.height > 0) {
            clearInterval(set);
            
            //上传的本地图片支持格式:JPG,JPEG,PNG;单张图片大小不能超过2M,图片的宽高必须相同,且图片像素需大于等于550*550
            if (file.type.indexOf("image") < 0) {                
                ImgUploadTips("请选择图片类型的文件!");
                return;
            }
            if (file.Size > Max_Size * 1024) {
                ImgUploadTips("请上传小于或等于2M的图片!");
                return;
            }
            if (img.width != img.height) {
                ImgUploadTips("请上传宽高相同的图片!");
                return;
            }
            if (img.width < Min_Width) {
                ImgUploadTips("请上传大于等于550*550的图片!");
                return;
            }

     }

    var set = setInterval(check, 40);

——实例化Image对象、加载src—— 


备注:若需获取多张图片宽高进行逻辑判断并提示时,建议使用hiden控件保存异常提示信息,待图片识别结束后获取该控件提示信息进行弹窗提示。

相关补充:input file 清空处理

使用input file上传图片时,如果重复上传相同的图片,会发现对应的改变响应操作没有执行,其原因是input file 选择上传图片后,它的值不会自动清空。

input file 清空实现如下:

html页面代码如下:

1

<input id="file_input" type="file" onchange="upLoadFile(this)" value="" />

js的代码如下,可以直接将上传文件input按钮的内容直接清空:

1

2

var obj=document.getElementById('file_input');

obj.outerHTML=obj.outerHTML;

备注:

1、$("#file_input") .outerHTML不等同document.getElementById('file_input').outerHTML;

2、input file 多选属性为:multiple="multiple"

  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个基本的实现方案,可以用于判断不同浏览器和图片类型大小: ```javascript function validateImage(file) { // 获取文件类型大小 var fileType = file.type; var fileSize = file.size; // 判断文件类型 if (fileType !== "image/png" && fileType !== "image/jpg" && fileType !== "image/jpeg") { alert("只支持 png, jpg 和 jpeg 格式的图片"); return false; } // 判断文件大小 if (fileSize > 5 * 1024 * 1024) { alert("文件大小不能超过 5MB"); return false; } // 判断浏览器类型 var isIE = navigator.userAgent.indexOf("Trident") !== -1; var isEdge = navigator.userAgent.indexOf("Edge") !== -1; var isChrome = navigator.userAgent.indexOf("Chrome") !== -1; if (isIE || isEdge) { // IE 和 Edge 浏览器 var objImg = document.createElement("img"); objImg.src = file.value; if (objImg.fileSize > 5 * 1024 * 1024) { alert("文件大小不能超过 5MB"); return false; } } else if (isChrome) { // Chrome 浏览器 var img = new Image(); img.src = window.URL.createObjectURL(file); img.onload = function() { if (this.width > 1920 || this.height > 1080) { alert("图片度不能超过 1920px,度不能超过 1080px"); return false; } }; } return true; } // 监听上传图片事件 var fileInput = document.getElementById("fileInput"); fileInput.addEventListener("change", function() { var file = this.files[0]; if (validateImage(file)) { // 图片验证通过,可以进行上传操作 // ... } }); ``` 注意:以上代码仅为基本实现方案,可能存在一些兼容性问题和安全性问题,具体需要根据实际情况进行优化和改进。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值