zoukankan      html  css  js  c++  java
  • js获取上传图片大小,判断上传图片类型,获取图片真实宽度和高度

    html部分

    <div class="form-group  col-md-12">
        <label class="col-md-2 text-right" for="name">預覽圖片</label>
        <div class=" col-md-8">
            <input type="file" name="img" accept="image/*" id="image-id">
        </div>
    </div>
    <div class="form-group  col-md-12">
        <label class="col-md-2 text-right" for="name">福利圖片</label>
        <div class=" col-md-8">
            <input type="file" name="imgs" accept="image/*" id="images-id">
        </div>
    </div>

    js部分

    //判斷上傳圖片格式
    var imgtype = testImgType("image-id");
    if(!imgtype) { toastr.warning('預覽圖片格式不正確'); return false; }
    var imgstype = testImgType("images-id");
    if(!imgstype) { toastr.warning('福利圖片格式不正確'); return false; }
    
    //判斷上傳圖片大小
    var imgfile=document.getElementById("image-id");
    var imgbool = testMaxSize(imgfile,1048576)?testMaxSize(imgfile,1048576):'';
    if(!imgbool){
        toastr.warning('預覽圖片過大,請上傳小於1M的圖片');
        return false;
    };
    var imgsfile=document.getElementById("images-id");
    var imgsbool = testMaxSize(imgsfile,1048576)?testMaxSize(imgsfile,1048576):'';
    if(!imgsbool){
        toastr.warning('福利圖片過大,請上傳小於1M的圖片');
        return false;
    };

    函數部分

    function testImgWidthHeight(img, w,h,callback){
        var input = document.getElementsByName('img');
        if(input.files){
            //读取图片数据
            var f = input.files[0];
            var reader = new FileReader();
            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 != w || height != h) {
                        //隐藏
                        input.value="";
                        callback && callback(false);
                    } else {
                        callback && callback(true);
                    }
                };
                image.src= data;
            };
            reader.readAsDataURL(f);
    
        }else{
            var image = new Image();
            image.onload =function(){
                var width = image.width;
                var height = image.height;
                var fileSize = image.fileSize;
                alert(width+'===2==='+height+"====="+fileSize);
            }
            image.src = input.value;
        }
    }
    /**
     *文件大小
     * @param fileData
     * @param Max_Size 限制圖片大小
     * @returns {boolean}
     */
    function testMaxSize(fileData,Max_Size){
        var isAllow=false;
        var size = fileData.files[0].size;
        isAllow = size <= Max_Size;
        if(!isAllow){
            return false;
        }
        return isAllow;
    }
    /**
     * 判断图片类型
     * @param eventId 圖片id
     * @param gif|jpg|jpeg|png|GIF|JPG|PNG
     * @returns {boolean}
     */
    function testImgType(eventId) {
        var tmpFile = document.getElementById(eventId);
        if (!/.(jpg|jpeg|png|JPG|PNG)$/.test(tmpFile.value)) {
            tmpFile.value= "";//清空上傳圖片
            return false;
        }
        return true;
    }
  • 相关阅读:
    ovs QOS
    OpenvSwitch端口镜像
    MyCat入门指南
    Mycat跨分片Join
    MyCAT 命令行监控
    MyCat的分片规则
    FreeMarker初探--介绍
    FreeMarker初探--安装FreeMarker
    linux 安装配置zookeeper
    Maven 环境搭建及相应的配置
  • 原文地址:https://www.cnblogs.com/clubs/p/9982169.html
Copyright © 2011-2022 走看看