指引网

当前位置: 主页 > 网页制作 > JavaScript >

JS判断上传文件类型程序代码

来源:网络 作者:佚名 点击: 时间:2017-07-02 09:13
[摘要]  本文章来给各位同学介绍两个用于在前端用户上传时就限制用户上传文件类型,这样在用户未提交之后就知道了,如果文件比较大就不会浪费时间了哦。


例1,只能限制上传图片.gif, .jpg, .jpeg

 代码如下 复制代码

<script language=javascript>

function canbesubmit(form) {

var ext,idx;

if (form.Pic1.value == '')

{

alert("请选择需要上传的图片文件!");

return false;

}

else

{

idx = form.Pic1.value.lastIndexOf(".");

if (idx != -1)

{

ext = form.Pic1.value.substr(idx+1).toUpperCase();

if (ext != 'GIF' && ext != 'JPG' && ext != 'JPEG')

{

alert("只能上传.gif, .jpg, .jpeg类型的文件!");

return false;

}

}

else

{

alert("只能上传.gif, .jpg, .jpeg类型的文件!");

return false;

}

}

return true;

}

</script>

 

<form method="post" action="UploadPicSave.asp" enctype="multipart/form-data" name="uploadform" onsubmit="return canbesubmit(this)">

例2 判断上传文件的宽高,类型,filesize

 代码如下 复制代码

<script type="text/javascript">

        UpLoadFileCheck = function () {
            this.AllowExt = ".jpg,.gif,.png,.jpeg"; //允许上传的文件类型 0为无限制 每个扩展名后边要加一个"," 小写字母表示
            this.AllowImgFileSize = 1; //允许上传文件的大小 0为无限制 单位:KB
            this.AllowImgWidth = 10; //允许上传的图片的宽度 0为无限制 单位:px(像素)
            this.AllowImgHeight = 10; //允许上传的图片的高度 0为无限制 单位:px(像素)
            this.ImgObj = new Image();
            this.ImgFileSize = 0;
            this.ImgWidth = 0;
            this.ImgHeight = 0;
            this.FileExt = "";
            this.ErrMsg = "";
            this.IsImg = false; //全局变量

        }

        UpLoadFileCheck.prototype.CheckExt = function (obj) {
            this.ErrMsg = "";
            this.ImgObj.src = obj.value;
            //this.HasChecked=false; 
            if (obj.value == "") {
                this.ErrMsg = "n请选择一个文件";
            }
            else {
                this.FileExt = obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase();
                if (this.AllowExt != 0 && this.AllowExt.indexOf(this.FileExt) == -1)//判断文件类型是否允许上传
                {
                    this.ErrMsg = "n该文件类型不允许上传。请上传 " + this.AllowExt + " 类型的文件,当前文件类型为" + this.FileExt;
                }
            }
            if (this.ErrMsg != "") {
                this.ShowMsg(this.ErrMsg, false);
                return false;
            }
            else
                return this.CheckProperty(obj);
        }

        UpLoadFileCheck.prototype.CheckProperty = function (obj) {
            if (this.ImgObj.readyState != "complete")//
            {
                sleep(1000); //一秒使用图能完全加载   
            }

            if (this.IsImg == true) {
                this.ImgWidth = this.ImgObj.width; //取得图片的宽度
                this.ImgHeight = this.ImgObj.height; //取得图片的高度
                if (this.AllowImgWidth != 0 && this.AllowImgWidth < this.ImgWidth)
                    this.ErrMsg = this.ErrMsg + "n图片宽度超过限制。请上传宽度小于" + this.AllowImgWidth + "px的文件,当前图片宽度为" + this.ImgWidth + "px";

                if (this.AllowImgHeight != 0 && this.AllowImgHeight < this.ImgHeight)
                    this.ErrMsg = this.ErrMsg + "n图片高度超过限制。请上传高度小于" + this.AllowImgHeight + "px的文件,当前图片高度为" + this.ImgHeight + "px";
            }

            this.ImgFileSize = Math.round(this.ImgObj.fileSize / 1024 * 100) / 100; //取得图片文件的大小 
            if (this.AllowImgFileSize != 0 && this.AllowImgFileSize < this.ImgFileSize)
                this.ErrMsg = this.ErrMsg + "n文件大小超过限制。请上传小于" + this.AllowImgFileSize + "KB的文件,当前文件大小为" + this.ImgFileSize + "KB";

            if (this.ErrMsg != "") {
                this.ShowMsg(this.ErrMsg, false);
                return false;
            }
            else
                return true;
        }

        UpLoadFileCheck.prototype.ShowMsg = function (msg, tf)//显示提示信息 tf=false 显示错误信息 msg-信息内容
        {
            /*msg=msg.replace("n","<li>");
            msg=msg.replace(/n/gi,"<li>");
            */
            alert(msg);
        }
        function sleep(num) {
            var tempDate = new Date();
            var tempStr = "";
            var theXmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            while ((new Date() - tempDate) < num) {
                tempStr += "n" + (new Date() - tempDate);
                try {
                    theXmlHttp.open("get", "about:blank?JK=" + Math.random(), false);
                    theXmlHttp.send();
                }
                catch (e) { ; }
            }
            //containerDiv.innerText=tempStr; 
            return;
        }

        function c(obj) {
            var d = new UpLoadFileCheck();
            d.IsImg = true;
            d.AllowImgFileSize = 100;
            d.CheckExt(obj)
        }
        //调用 <input name="" type="file" onchange="c(this)" />
    </script>

------分隔线----------------------------