`

js 图片 验证 大小 格式 内容（完整）

HTML 
阅读更多 
<html><head><title>文件上传前台控制检测程序</title></head>
<style>
     body,td{font-size:12px;}
</style>
<body>
<script language=javascript>

/*----------------------------------------
文件上传前台控制检测程序

远程图片检测功能
检测上传文件类型

　检测图片文件格式是否正确
　检测图片文件大小
　检测图片文件宽度
　检测图片文件高度
图片预览
-----------------------------------------*/

var ImgObj=new Image();                           //建立一个图像对象

var AllImgExt=".jpg|.jpeg|.gif|.bmp|.png|";      //全部图片格式类型
var FileObj,ImgFileSize,ImgWidth,ImgHeight,FileExt,ErrMsg,FileMsg,HasCheked,IsImg;
                                                                              //全局变量 图片相关属性

/*以下为限制变量*/
var AllowExt=".jpg|.gif|.doc|.txt|";      //允许上传的文件类型,0为无限制
                                      //每个扩展名后边要加一个"|",小写字母表示
var AllowImgFileSize=70;    //允许上传图片文件的大小,0为无限制,单位:KB 
var AllowImgWidth=500;    //允许上传的图片的宽度,0为无限制,单位:px(像素)
var AllowImgHeight=500;  //允许上传的图片的高度,0为无限制,单位:px(像素)

HasChecked=false;

function CheckProperty(obj){         //检测图像属性

     FileObj=obj;
     if(ErrMsg!=""){          //检测是否为正确的图像文件,返回出错信息并重置
         ShowMsg(ErrMsg,false);
         return false;                                  //返回
     }

     if(ImgObj.readyState!="complete"){//如果图像是未加载完成进行循环检测
         setTimeout("CheckProperty(FileObj)",500);
         return false;
     }

     ImgFileSize=Math.round(ImgObj.fileSize/1024*100)/100;
//取得图片文件的大小
     ImgWidth=ImgObj.width ;                                                 //取得图片的宽度
     ImgHeight=ImgObj.height;                                                        //取得图片的高度
     FileMsg="\n图片大小:"+ImgWidth+"*"+ImgHeight+"px";
     FileMsg=FileMsg+"\n图片文件大小:"+ImgFileSize+"Kb";
     FileMsg=FileMsg+"\n图片文件扩展名:"+FileExt;

     if(AllowImgWidth!=0&&AllowImgWidth<ImgWidth){
         ErrMsg=ErrMsg+"\n图片宽度超过限制.请上传宽度小于"+AllowImgWidth+"px的文件,"+
                      "当前图片宽度为"+ImgWidth+"px";
     }
     if(AllowImgHeight!=0&&AllowImgHeight<ImgHeight){
         ErrMsg=ErrMsg+"\n图片高度超过限制.请上传高度小于"+AllowImgHeight+"px的文件,"+
                      "当前图片高度为"+ImgHeight+"px";
     }
     if(AllowImgFileSize!=0&&AllowImgFileSize<ImgFileSize){
         ErrMsg=ErrMsg+"\n图片文件大小超过限制.请上传小于"+AllowImgFileSize+"KB的文件,"+
                      "当前文件大小为"+ImgFileSize+"KB";
     }
     if(ErrMsg!=""){
         ShowMsg(ErrMsg,false);
     }
     else{
         ShowMsg(FileMsg,true);
     }
}

ImgObj.onerror=function(){ErrMsg='\n图片格式不正确或者图片已损坏!'}

/*以下为显示提示信息,tf=true显示文件信息,tf=false显示错误信息,msg-信息内容*/
function ShowMsg(msg,tf){
     msg=msg.replace("\n","<li>");
     msg=msg.replace(/\n/gi,"<li>");
     if(!tf){
         document.all.UploadButton.disabled=true;
         FileObj.outerHTML=FileObj.outerHTML;
         MsgList.innerHTML=msg;
         HasChecked=false;
     }
     else{
         document.all.UploadButton.disabled=false;
         if(IsImg){
             PreviewImg.innerHTML="<img src='"+ImgObj.src+"' width='60' height='60'>"
         }
         else{
             PreviewImg.innerHTML="非图片文件";
         }
         MsgList.innerHTML=msg;
         HasChecked=true;
     }
}

function CheckExt(obj){
     ErrMsg="";
     FileMsg="";
     FileObj=obj;
     IsImg=false;
     HasChecked=false;
     PreviewImg.innerHTML="预览区";
     if(obj.value==""){return false;}
     MsgList.innerHTML="文件信息处理中...";
     document.all.UploadButton.disabled=true;
     FileExt=obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase();
     if(AllowExt!=0&&AllowExt.indexOf(FileExt+"|")==-1){                 //判断文件类型是否允许上传
         ErrMsg="\n该文件类型不允许上传!请上传"+AllowExt+"类型的文件,当前文件类型为"+FileExt;
         ShowMsg(ErrMsg,false);
         return false;
     }

     if(AllImgExt.indexOf(FileExt+"|")!=-1){                   //如果是图片文件,则进行图片信息处理
         IsImg=true;
         ImgObj.src=obj.value;
         CheckProperty(obj);
         return false;
     }
     else{
         FileMsg="\n文件扩展名:"+FileExt;
         ShowMsg(FileMsg,true);
     }
}


function SwitchUpType(tf){
     if(tf){
         str='<input type="file" name="file1" onchange="CheckExt(this)" style="width:180px;">'
     }
     else{
         str='<input type="text" name="file1" onblur="CheckExt(this)" style="width:180px;">'
     }
     document.all.file1.outerHTML=str;
     document.all.UploadButton.disabled=true;
     MsgList.innerHTML="";
}
</script>

<form enctype="multipart/form-data" method="POST" onsubmit="return HasChecked;">
<fieldset style="width: 372; height: 60;padding:2px;">
<legend><font color="#FF0000">图片来源</font></legend>
<input type="radio" name="radio1" checked onclick="SwitchUpType(true);">本地
<input type="radio" name="radio1" onclick="SwitchUpType(false);">远程：
<input type="file" name="file1" onchange="CheckExt(this)" style="width:180px;"> 
<input type="submit" id="UploadButton" value="开始上传" disabled><br>
<div style="border:1 solid #808080;background:#E0E0E0;width100%;height:20px;color:#606060;padding:5px;">
<table border="0"><tr><td width="60" id="PreviewImg">预览区</td>
<td id="MsgList" valign="top"></td></tr></table>
</div></fieldset></form></body></html>
分享到：
| 【转】单向加密算法
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js验证上传图片 大小 格式

    在IT领域，特别是前端开发中，JavaScript（JS）被广泛应用于网页交互与数据验证，其中对上传图片的大小和格式进行验证是常见的需求之一。本文将深入解析如何使用JavaScript进行图片上传前的验证，包括检查图片格式、...

    JS上传图片大小验证.rar

    在JavaScript中，对用户上传的图片进行大小验证是常见的需求，尤其在网页应用中，确保图片大小在合理范围内可以优化加载速度，节省服务器资源。这个"JS上传图片大小验证.rar"压缩包可能包含了一个实现此类功能的示例...

    JS验证图片格式 有预览功能

    这个“JS验证图片格式 有预览功能”的主题主要关注如何利用JavaScript来检查用户上传的文件是否为合法的图片格式，并提供实时预览功能。以下将详细介绍这一技术实现的关键知识点。 1. **文件输入事件（File Input ...

    JS验证图片格式和大小并预览的简单实例

    在JavaScript中，对上传的图片进行格式和大小的验证以及预览是常见的需求，尤其是在用户交互界面中。这个实例提供了一种实现方法，主要涉及HTML5的File API、图像对象（Image）以及DOM操作。下面将详细解释这个实例...

    上传图片前验证图片格式及实现预览

    1. **图片格式验证**：在JavaScript中，我们可以通过`File.type`属性来获取文件的MIME类型。常见的图片MIME类型有`image/jpeg`、`image/png`、`image/gif`等。通过比较`File.type`与预期的图片类型，我们可以判断...

    上传图片之前验证图片格式，同时实现预览

    在用户上传图片之前，验证图片格式以及提供预览功能是非常重要的步骤，这不仅可以确保上传的图片符合预期的格式要求，还可以为用户提供更好的交互体验。本文将详细讲解如何使用JavaScript来实现这个功能。 首先，...

    js图片滑动验证

    总的来说，JS滑动验证结合了前端开发的多个技术点，是JavaScript在安全领域应用的一个实例，同时也展示了JavaScript在创建动态、交互式用户体验方面的强大能力。通过深入研究和实践，开发者可以更好地理解和掌握这些...

    js上传图片大小类型限制检测

    将上述的类型和大小检测结合起来，形成完整的图片上传前的验证功能： ```javascript function validateImage(file, maxSizeInBytes) { if (!checkFileType(file)) { handleUploadError(file, 'type'); return...

    js控制图片大小

    js控制图片大小，并验证图片类型，兼容各浏览器，测试可用

    支持图片上传及实时显示，可设置显示图片的大小。由php、Ajax、javascript开发

    同时，JavaScript还可以根据用户的选择动态调整预览图片的大小。 **图片上传** 过程通常包括文件选择、文件读取、文件验证和文件发送。在JavaScript中，`FileReader` API用于读取用户选择的文件，并使用`data URL`...

    上传图片格式大小检测

    在前端，可以通过JavaScript的File API来检测文件的类型，如`file.type`属性可以获取到MIME类型，进而判断图片格式。 其次，图片大小的检测主要是为了防止过大文件导致服务器压力增大或者内存溢出。前端通常会限制...

    上传图片预览（限制格式大小）

    本篇将详细介绍如何在`.NET MVC`框架下，结合`HTML`、`JavaScript`（简称Js）和`jQuery`（简称JQ）实现"上传图片预览"功能，并限制上传的图片格式和大小。 首先，我们需要在前端页面创建一个`HTML`表单，包含一个`...

    Javascript验证上传图片大小[前台处理]_.docx

    本文主要讨论了两种图片大小验证方法：后台处理和前台处理，并重点介绍了使用JavaScript在前端进行图片大小验证的实现方式。 后台处理通常涉及通过AJAX将图片上传到服务器，然后在服务器端检查文件大小。这种方式...

    JS上传文件大小验证.rar

    除了验证文件大小，还可以结合File API实现其他功能，如预览图片、显示文件类型图标、多文件上传等。 综上所述，JS上传文件大小验证是通过HTML5 File API实现的一种前端交互技术，它能够提高用户体验，减少无效的...

    图片上传-可以限制图片的大小和类型

    为了提供良好的用户体验并确保系统稳定运行，开发者通常需要对用户上传的图片进行一些限制，包括图片的大小和类型。以下是对这一主题的详细说明： 1. **图片大小限制**： - **原因**：图片过大可能导致上传时间过...

    基于jQuery的图片点击验证插件

    在本案例中，jQuery用于处理图片验证的用户交互和动态效果。 **二、图片点击验证原理** 图片点击验证通常包含两部分：随机生成的图片和用户交互。图片通常是一些随机组合的数字或字母，用户需要按照提示正确点击或...

    JS控制图片上传大小

    本文将深入探讨如何使用JavaScript（JS）来控制图片上传的大小，确保用户上传的图片符合预设的标准。 一、图片上传前的前端验证 在用户提交图片之前，前端验证是最直接的控制方式。可以使用HTML5的`FileReader API...

    js编写的图片滑块验证.rar

    在本项目中，"js编写的图片滑块验证.rar" 提供了一种使用JavaScript实现的图片滑块验证机制，这是一种常见的验证码形式，用于防止自动化的机器人或恶意软件进行非法操作。 图片滑块验证通常包含以下几个核心组成...

    java日语版js验证图片预言

    此外，JavaScript还可能包含了图片的大小、格式检查，以确保用户上传的图片符合要求。 "日语版"表明这个项目可能是针对日本市场的，界面和提示信息都使用了日语，这需要开发者具有多语言处理的能力，或者使用了国际...

Magicbox
Global site tag (gtag.js) - Google Analytics