zoukankan      html  css  js  c++  java
  • 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 />

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

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

  • 相关阅读:
    最全的 Twitter Bootstrap 开发资源清单
    jQuery布局插件UI Layout简介及使用方法
    SQLcode错误代码汇总和sqlstate=37000的解决方案
    JQUERY插件学习之jQuery UI
    如何判断/检查一个集合(List<string>)中是否有重复的元素
    反射原理及简介
    C# 获取文件夹下的所有文件的文件名
    委托编程指南
    模块封装与程序集
    Redis Lock
  • 原文地址:https://www.cnblogs.com/taizhouxiaoba/p/1413893.html
Copyright © 2011-2022 走看看