zoukankan      html  css  js  c++  java
  • js验证图片上传大小,格式以及宽高

    html代码

    <input type="file" name="file" id="file"  onchange="ajaxFileUpload(this)"/>
    <img id="loginImg" src="" />

    javascript代码

      由于高级浏览器对上传图片路径进行了加密,图片在页面不能正常显示,在这里我们可以将图片转换成base64格式的路径就可以了。

    function ajaxFileUpload(obj){
        var path,clip = $("#loginImg"),FileReader = window.FileReader;
        if (FileReader) {//chrome
            var reader = new FileReader(),
                file = obj.files[0];
            reader.onload = function(e) {
                var str=e.target.result;
                var str1=str.split(";");
                var str2=str1[0].split("/");
                clip.attr("src", e.target.result);
                clip.attr("data-type", str2[1]);  //获取图片的格式
                if (limitImg('loginImg', 999, false, 1920, 1080) == ""||limitImg('loginImg', 999, false, 1920, 1080)==undefined) {
                     alert(limitImg('imgId',999,false,1920,1080))
                } else {
                     alert(limitImg('imgId', 999, false, 1920, 1080))
                }
            };
            reader.readAsDataURL(file);
        }
        else {
            path = $(this).val();
            if (/"wW"/.test(path)) {
                path = path.slice(1,-1);
            }
            clip.attr("src",path);
        } 
    }
    function limitImg() {
        var img = document.getElementById(arguments[0]); //显示图片的对象
        var maxSize = arguments[1]; //图片的大小
        var allowGIF = arguments[2] || false;
        var maxWidth = arguments[3] || 0;
        var maxHeight = arguments[4] || 0;
        var postfix = img.getAttribute("data-type");
        var str = "jpeg";
      
    if (str.indexOf(postfix.toLowerCase()) == -1) { if (allowGIF) { return "图片格式不对,只能上传jpg或gif图像"; } else { return "图片格式不对,只能上传jpg图像"; } } if (img.fileSize > maxSize * 1024) { return "图片大小超过限制,请限制在" + maxSize + "K以内"; } if (img.fileSize == -1) { return "图片格式错误,可能是已经损坏或者更改扩展名导致,请重新选择一张图片"; } else { if (maxWidth > 0) { if (img.width > maxWidth) { return "图片宽度超过限制,请保持在" + maxWidth + "像素内"; } if (img.height > maxHeight) { return "图片高度超过限制,请保持在" + maxHeight + "像素内"; }
           //万恶的需求,还没见过这么上传图片的呢
    if(img.width%4 != 0){ return "图片宽度必须为4的整数倍"; } if(img.height%4 != 0){ return "图片高度必须为4的整数倍"; } }else{ return "" } } }
  • 相关阅读:
    2018/2/26 省选模拟赛 0分
    2018/2/25 省选模拟赛 36分
    BZOJ 2428 JZYZOJ1533 : [HAOI2006]均分数据 模拟退火 随机化
    BZOJ 4036: [HAOI2015]按位或 集合幂函数 莫比乌斯变换 莫比乌斯反演
    BZOJ 3196 Tyvj 1730 二逼平衡树 树套树 线段树 treap
    POJ 2728 JZYZOJ 1636 分数规划 最小生成树 二分 prim
    JZYZOJ1998 [bzoj3223] 文艺平衡树 splay 平衡树
    POJ 3974 Palindrome 字符串 Manacher算法
    BZOJ 1013: [JSOI2008]球形空间产生器sphere 高斯消元
    jQuery cookie使用
  • 原文地址:https://www.cnblogs.com/learnmo/p/6277037.html
Copyright © 2011-2022 走看看