关于图片上传限制的js

最新推荐文章于 2024-04-02 17:28:09 发布

原创最新推荐文章于 2024-04-02 17:28:09 发布 · 1.2k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #图片上传

前端开发专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的图片预览功能，并在预览前检查图片的尺寸及大小是否符合规定标准的方法。

为了保持代码的规格，以及大小，专门写的js，用于前台预览图片的时候，进行图片的限制。
逻辑是这样的，1、点击图片上传（input标签） 2、js会先判定图片是否同时满足高宽，大小
3、对于不满足条件的图片，将会清空input标签，以及预览的div的内容。
4、满足条件的不作任何操作，后就可以上传。

js代码：

    //判断浏览器是否支持FileReader接口
    if (typeof FileReader == 'undefined') {
        document.getElementById("#id01").InnerHTML = "<h1>当前浏览器不支持FileReader接口</h1>";
        //使选择控件不可操作
        document.getElementById("#id02").setAttribute("disabled", "disabled");
    }
    //选择图片，马上预览
    function loadImg(obj) {
        var file = obj.files[0];
        var reader = new FileReader();
        //读取文件过程方法
         reader.onloadstart = function (e) {
            console.log("开始读取....");
        }
        reader.onprogress = function (e) {
            console.log("正在读取中....");
        }
        reader.onabort = function (e) {
            console.log("中断读取....");
        }
        reader.onerror = function (e) {
            console.log("读取异常....");
        } 
        reader.onload = function (e) {
            var img = document.getElementById("#id01");
            img.src = e.target.result;
            img.onload = function () {
                if(img.width!=800&&img.height!=600){
    alert('当前图片不符合规范'+'width:'+img.width+',height:'+img.height+'size:'+e.loaded); 
                  //下面两句，清空input文件夹的缓存
                    var obj = document.getElementById('#input-type-file的id') ; 
                     obj.outerHTML=obj.outerHTML; 
                    img.src = ''; //不符合要求，清空图片数据
                     return ;//中断执行过程
                  }
            };
        }
        reader.readAsDataURL(file)
    }

html代码：
仅作参考

<input type="file" id="#input-type-file的id" onchange="loadImg(this)" accept="image/gif,image/jpeg,image/jpg,image/png"/></p>
<img id="#id01"/><div id="#id02"></div></div></div>