`
maria3905
  • 浏览: 22780 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

js验证上传类型

    博客分类:
  • js
 
阅读更多

很多时候都需要验证一下上传类型,比如有的只需要上传文件,则图片就不能上传,有的只要求上传图片,那么文件就不能上传,正常上传的html写法:

法一:

 

<span id="spanpic"><input type="file" name="picUrl" id="picUrl" onchange='chkfilepic();'/>
</span><span id="picUrl_error"></span>
				

 

 

首先触发的是chkfilepic()这个事件,

function chkfilepic(){
    var filevalue=$("#picUrl").val();
    if(!checkImgType(filevalue)){
    	alert("只能上传'.gif','.jpg','.jpeg','.png','.bmp'格式的图片",unblock);
	$("#spanpic").html(
"<input type='file' name='picUrl' id='picUrl' onchange='chkfilepic()'/>");
    }
}
//验证的js
var right_type=new Array(".gif",".jpg",".jpeg",".png",".bmp");//这个地方可以扩展
function checkImgType(fileURL)
{
	 //本程序用来验证后缀,如果还有其它格式,可以添加在right_type;
	 var right_typeLen=right_type.length;
	 var imgUrl=fileURL.toLowerCase();
	 var postfixLen=imgUrl.length;
	 var len4=imgUrl.substring(postfixLen-4,postfixLen);
	 var len5=imgUrl.substring(postfixLen-5,postfixLen);
	 for (var i=0;i<right_typeLen;i++){
		  if((len4==right_type[i])||(len5==right_type[i])){
		   	return true;
		  }
	 }
}

 法二:

<input type="file" id="myfile" name="myfile" onchange="checkFile()"/>

 触发的事件是checkFile()事件

String.prototype.endsWith=function(s){
	 if(s==null||s==""||this.length==0||s.length>this.length){  
	       return false;  
	  }            
	   if(this.substring(this.length-s.length)==s){  
	        return true;  
	     }else{  
	        return false;  
	    }  
	        return true;  
	    }
		
	function checkFile() {
	        var location = $('#myfile').val();
	       	if (location.endsWith('doc') || location.endsWith('docx')
      || location.endsWith('xls')|| location.endsWith('xlsx') || location.endsWith('ppt') 
      || location.endsWith('pdf')) {
	        	document.forms['form1'].submit();
	      	}else{
	        	alert("文件格式错误,附件仅支持doc、docx、xls、xlsx、ppt和pdf格式文件,请重新选择");
	      	}
	  }

 综上:两者是差不多的,任选一种即可,都属于可扩展的

分享到:
评论

相关推荐

    ExtJS验证上传文件类型

    ExtJS 验证上传文件类型 ExtJS 中实现文件上传功能是非常方便的,但对于新手来说,控制文件上传类型是一个难题。例如,我们只想让用户上传特定的文件类型,例如txt文件,那么如何实现当用户上传非txt文件时,给出...

    js验证上传文件大小

    总结来说,JavaScript验证上传文件大小主要通过监听文件输入字段的`change`事件,获取文件对象,然后检查`size`属性。结合HTML和CSS,我们可以创建一个交互式的文件上传界面,提供友好的用户反馈。这个功能对于任何...

    JS判断上传文件的大小类型等限制

    ### JS判断上传文件的大小类型等限制 在Web开发中,文件上传是一个常见的功能需求。为了确保用户体验并防止服务器资源被滥用,前端通常需要对上传的文件进行一系列的验证,如文件大小、文件类型等。本文将详细介绍...

    js验证上传swf文件格式的大小

    本知识点主要探讨如何使用JavaScript(js)来验证SWF(Shockwave Flash)文件的格式,并结合PHP在服务器端进行进一步的验证。 一、JS验证SWF文件格式 JavaScript在客户端进行文件验证可以提高用户体验,因为可以在...

    JS简单验证上传文件类型的方法

    总的来说,JavaScript验证上传文件类型的方法是通过获取文件扩展名并与预设的允许列表进行比较,以此来确保上传文件的安全性。这个方法可以被集成到更复杂的表单验证系统中,以提高网站的安全性和用户体验。

    JS上传文件大小验证.rar

    在Web开发中,JavaScript(JS)常常用于实现前端交互功能,包括文件上传。"JS上传文件大小验证"这个主题涉及到用户在网页上选择文件后,前端先进行文件大小的检查,以防止过大文件导致服务器压力或者用户体验问题。...

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

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

    js_multiple上传文件

    2. **jquery.validate.js**:这个插件用于表单验证,确保用户在上传文件之前满足所有要求,如文件类型、大小等。它提供了许多自定义规则和消息,可扩展性强。 3. **jquery.MultiFile.js**:这个插件专门用于实现多...

    js代码实现图片上传阿里云OSS

    2. **初始化plupload**: 创建`plupload`实例,设置其基本配置,如上传URL、文件类型限制(这里我们只允许图片上传)、上传队列大小等。同时,要开启多文件选择功能。 3. **配置OSS签名**:阿里云OSS采用签名机制...

    上传文件验证表单

    在“上传文件验证表单”中,表单验证是一个关键部分,它确保用户提交的数据满足预设的规则,例如文件类型、大小等限制。表单验证可以发生在客户端(JavaScript)和服务器端,以提供双重保障。在客户端,验证通常实时...

    js表单验证 表单验证类 整合

    js表单验证 表单的验证一直是网页设计者头痛的问题,表单验证类 Validator就是为解决这个问题而写的,旨在使设计者从纷繁复杂的表单验证中解放出来,把精力集中于网页的设计和功能上的改进上。 Validator是基于...

    JS上传图片大小验证.rar

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

    js上传附件

    在JavaScript(简称JS)中实现上传附件功能是一项常见的任务,特别是在网页应用中。这个功能允许用户选择并上传本地文件到服务器,通常与表单提交或数据存储相关联。本项目中,"js上传附件"的功能可能包括以下几个...

    js验证上传图片的方法

    标题中提到的“js验证上传图片的方法”涉及了JavaScript语言在Web开发中实现上传图片前的验证功能。这一技术广泛用于确保用户上传的文件符合网站的特定要求,比如文件类型、大小以及图片的尺寸等。 在描述中提到,...

    图片上传(图片预览+文件类型验证)

    本文将详细讲解如何实现“图片上传(图片预览+文件类型验证)”这一功能,主要涵盖以下几个核心知识点: 1. **前端图片预览**: 在用户选择图片文件后,提供预览功能可以提升用户体验。这通常通过HTML5的File API来...

    JS+asp.net+图片上传+预览+支持多上传+上传前预览

    在图片上传中,JS通常用于处理用户选择文件后在本地预览图片,验证文件类型和大小,以及提供一个友好的用户体验,如进度条显示上传进度。 1. **图片预览**:使用HTML5的FileReader API,开发者可以读取用户选择的...

    验证上传图片

    标题“验证上传图片”涉及到的是一个常见的Web开发功能,即用户通过网页上传图片,并进行合法性验证。这个过程包括但不限于文件类型检查、文件大小限制、图片尺寸校验等多个方面。接下来,我们将深入探讨这一主题。 ...

    js验证大全(基于MVC ,spring等模式 )

    以下是一些常见的JavaScript验证类型,它们在MVC和Spring应用中尤为常见: 1. 非空验证:检查输入字段是否为空,确保用户提供了必要的信息。 2. 长度验证:限制输入字段的字符长度,例如,密码强度要求至少8个字符...

    《上传文件类型匹配》

    前端验证是第一道防线,可以在用户尝试上传文件时提供即时反馈,但不应作为唯一防护措施,因为JavaScript可以被禁用或篡改。前端验证通常包括检查文件扩展名,限制文件大小等。 5. **MIME类型检查**: MIME类型是...

Global site tag (gtag.js) - Google Analytics