• JS 判断 图片上传_限制格式、类型、尺寸


    用HTML的File控件上传图片,用JS判断和限制图片格式、类型、尺寸

    //判断图片类型
            var f=document.getElementById("File1").value;
            if(f=="")
            { alert("请上传图片");return false;}
            else
            {
            if(!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(f))
            {
              alert("图片类型必须是.gif,jpeg,jpg,png中的一种")
              return false;
            }
            }

    function CheckFile(f,p)
     2{
     3//判断图片尺寸
     4var img=null;
     5img=document.createElement("img");
     6document.body.insertAdjacentElement("beforeend",img);
     7img.style.visibility="hidden"
     8img.src=f;
     9var imgwidth=img.offsetWidth;
    10var imgheight=img.offsetHeight;
    11if(p.name=="UpFile_Photo1")
    12{
    13if(imgwidth!=68||imgheight!=68)
    14{
    15alert("小图的尺寸应该是68x68");
    16}

    17}

    18if(p.name=="UpFile_Photo2")
    19{
    20if(imgwidth!=257||imgheight!=351)
    21{
    22alert("中图的尺寸应该是257x351");
    23}

    24}

    25if(p.name=="UpFile_Photo3")
    26{
    27if(imgwidth!=800||imgheight!=800)
    28{
    29alert("大图的尺寸应该是800x800");
    30}

    31}

    32//判断图片类型
    33if(!/\.(gif|jpg|jpeg|bmp)$/.test(f))
    34{
    35alert("图片类型必须是.gif,jpeg,jpg,bmp中的一种")
    36return false;
    37}

    38return true;
    39}

    1<input type="file" id="UpFile_Photo1" runat="server" name="UpFile_Photo1" 
    2size="35" onpropertychange="CheckFile(this.value,this)">小图<br />
    3<input type="file" id="UpFile_Photo2" runat="server" name="UpFile_Photo2" 
    4size="35" onpropertychange="CheckFile(this.value,this)">中图<br />
    5<input type="file" id="UpFile_Photo3" runat="server" name="UpFile_Photo3" 
    6size="35" onpropertychange="CheckFile(this.value,this)">大图<br />

    玉环人才吧 玉环人才网 玉环人力网 玉环招聘网 三支脚人才网

    玉环人力网(又名玉环人才网)是玉环人才吧旗下一流的玉环人力资源招聘行业服务品牌,汇集海量玉环人才,开放玉环人才简历和玉环岗位,提供玉环招聘网,玉环人才市场动态行情,玉环劳务派遣,玉环培训等,是玉环最大的人才网站。

  • 相关阅读:
    两种数组,注意用法
    PD 导出数据库结构
    获取随机金额:上限下限都要取到
    mysql常用语句
    SQL替换字符串、条件查询
    jtopo树结构方法积累
    jtopo 学习
    .net C# SortedList用法
    .net C# List用法
    .Net中C# Dictionary 用法(转)
  • 原文地址:https://www.cnblogs.com/taizhouxiaoba/p/1413893.html
Copyright © 2020-2023  润新知