jquery限制上传文件的类型和限制文件的大小

核心代码

 代码如下 复制代码

<script type="text/javascript">

$(document).ready(function(){

$("#form0").submit(function() {

var filepath=$("input[name='myFile']").val();

        var extStart=filepath.lastIndexOf(".");

        var ext=filepath.substring(extStart,filepath.length).toUpperCase();

        if(ext!=".BMP"&&ext!=".PNG"&&ext!=".GIF"&&ext!=".JPG"&&ext!=".JPEG"){

         alert("图片限于bmp,png,gif,jpeg,jpg格式");

         return false;

        }

       

   var img=new Image();

   img.src=filepath;  

while(true){

   if(img.fileSize>0){

   if(img.fileSize>3*1024){      

alert("图片不大于300KB。");

return false;

   }

       break;

   }

}

   return true;     

});

});

</script>

实例

 代码如下 复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="lib/jquery-1.3.2.min.js" ></script>
<title>检查上传图片大小</title>
<style type="text/css">
.img {width:136px;height:102px;}
.imgError{border:3px solid red;}
</style>
<script type="text/javascript">
//限制上传图片大小100K
var MAXSIZE = 100 * 1024;

//图片大小限制信息
var ERROR_IMGSIZE = "图片大小不能超过100K";
//默认图片
var NOPHOTO = "imgs/nophoto.gif";

//图片是否合格
var isImg = true;
/**
* Input file onchange事件
* @params obj file对象
* @return void
**/
function checkFileChange(obj) {

//初始化设置
$(".imgTable").removeClass("imgError");
updateTips("");
var img = $(".img").get(0);
var file = obj.value;
var exp = /..jpg|..gif|..png|..bmp/i;
if (exp.test(file)) {//验证格式
if($.browser.msie) {//判断是否是IE
img.src = file;
} else {
img.src = obj.files[0].getAsDataURL();
sizeCheck(img);
}

} else {
img.src = NOPHOTO;
$(".imgTable").addClass("imgError");
updateTips("图片格式不正确");
isImg = false;
}

}
/**
* sizeCheck 检查图片大小
* @params img 图片对象
* @return void
**/
function sizeCheck(img) {
//初始化设置
$(".imgTable").removeClass("imgError");
updateTips("");
if ($.browser.msie) {//查看是否是IE
if(img.readyState == "complete") {
if (img.fileSize > MAXSIZE) {
$(".imgTable").addClass("imgError");
updateTips(ERROR_IMGSIZE);
isImg = false;
}else {
isImg = true;
}

}else {
$(".imgTable").addClass("imgError");
updateTips(ERROR_IMGSIZE);
isImg = false;
}

} else {
var file = $("input:file[name='uploadImg']")[0];

if (file.files[0].fileSize > MAXSIZE) {
$(".imgTable").addClass("imgError");
updateTips(ERROR_IMGSIZE);
isImg = false;
}else {
isImg = true;
}

}
}

/**
* updateTips 注册错误信息显示
* @params str 显示内容
* @return void
**/
function updateTips(str) {
$("p#errorTips").text(str);
}
/**
* commit 注册提交
* @return void
**/
function commit() {

var isCommit = true;
var usrname = $("input:text[name='usrname']"),
email = $("input:text[name='email']"),
img = $(".img"),
file = $("input:file[name='uploadImg']"),
frm = document.frm;

isCommit = isCommit && isImg;

if(isCommit) {
frm.action = "about:blank";
frm.submit();
}
}
/**
* errorImg 图片错误显示
* @params img 图片对象
* @return void
**/
function errorImg(img) {
img.src = NOPHOTO;
}

</script>
</head>
<body>
<form name="frm" method="post">
<p id="errorTips"> </p>
<table cellpadding="1" cellspacing="0" width="350px" border="1">
<tr>
<td><label>姓名：</label></td>
<td><input type="text" name="usrname" maxlength="50"/></td>
</tr>
<tr>
<td><label>性别：</label></td>
<td><input type="radio" name="sex" value="0"/>男<input type="radio" name="sex" value="0"/>女</td>
</tr>
<tr>
<td><label>邮件：</label></td>
<td><input type="text" name="email" maxlength="100"/></td>
</tr>
<tr>
<td><lable>图像</label></td>
<td>
<table cellpadding="0" cellspacing="0" class="imgTable">
<tr>
<td><img src="imgs/nophoto.gif" mce_src="imgs/nophoto.gif" class="img" alt="头像" onerror="Javascript:errorImg(this);"
onreadystatechange="Javascript:sizeCheck(this);"/>
</td>
</tr>
<tr>
<td><input type="file" name="uploadImg" onchange="Javascript:checkFileChange(this);"
size="12"/></td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2"><a href="Javascript:commit();" mce_href="Javascript:commit();">注册</a></td>
</tr>
</table>
</form>
</body>
</html>
时间： 2024-10-06 04:20:48

jquery限制上传文件的类型和限制文件的大小的相关文章

jquery easy ui ligerForm 没有file类型如何实现文件上传

问题描述 jquery easy ui ligerForm 没有file类型如何实现文件上传 jquery easy ui ligerForm 没有file类型如何实现文件上传 解决方案 参考:http://www.th7.cn/web/js/201408/54045.shtml 解决方案二: eayui 中有这样的file上传的文件的元素,怎么不用这个那. ' ' +'' +' '; 解决方案三: '<form id="uploadForm" class="easyu

jQuery获取上传文件的名称的正则表达式

  在Web开发中,经常会涉及到文件上传.文件上传时通常都要验证文件的有效性,这个通常就要用正则表达式来判断. 方法一: ? 1 2 3 4 5 6 7 $('input[type="file"]').on('change', function() { var reg = /[^/]*[/]+/g; //匹配文件的名称和后缀的正则表达式 var name = $(this).val().replace(reg, ''); var postfix = /.[^.]+/.exec(name

jQuery异步上传文件插件ajaxFileUpload详细介绍

这篇文章主要介绍了jQuery异步上传文件插件ajaxFileUpload详细介绍,本文首先讲解了ajaxFileUpload的参数.错误提示等知识,然后给出了简单使用实例和ASP.NET MVC模式下的使用实例,需要的朋友可以参考下     一.ajaxFileUpload是一个异步上传文件的jQuery插件. 传一个不知道什么版本的上来,以后不用到处找了. 语法:$.ajaxFileUpload([options]) options参数说明: 1.url 上传处理程序地址. 2,fileEl

jQuery获取上传文件的名称的正则表达式_jquery

方法一: $('input[type="file"]').on('change', function() { var reg = /[^\\\/]*[\\\/]+/g; //匹配文件的名称和后缀的正则表达式 var name = $(this).val().replace(reg, ''); var postfix = /\.[^\.]+/.exec(name);//获取文件的后缀 var text =name.substr(0,postfix['index']);//获取没有后缀的名

jQuery简单验证上传文件大小及类型的方法_jquery

本文实例讲述了jQuery简单验证上传文件大小及类型的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="jquery1.8/jquery-1.8.0.js" type="

jquery实现上传文件大小类型的验证例子(推荐)_jquery

jquery实现上传文件大小类型的验证例子(推荐) <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="jquery1.8/jquery-1.8.0.js" type="text/javascript"

jQuery Ajax 上传文件处理方式介绍(推荐)_jquery

AJAX 是一种与服务器交换数据的技术,可以在补充在整个页面的情况下更新网页的一部分. 下面的表格列出了所有的 jQuery AJAX 方法: jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,接下来通过本文给大家介绍jquery ajax 上传文件处理方式. FormData对象 XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过J

POST请求,iOS开发时,图片上传的时候,类型是文件流,怎么写

问题描述 POST请求,iOS开发时,图片上传的时候,类型是文件流,怎么写 POST请求,iOS开发时,图片上传的时候,类型是文件流,怎么写,在线等 解决方案 http://blog.csdn.net/zhangkongzhongyun/article/details/8277426 解决方案二: 给个思路就行,或者给个链接

Jquery Uploadify上传带进度条介绍

 本篇文章主要是对Jquery Uploadify上传带进度条的简单实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助  代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpLoad.aspx.cs" Inherits="UploadifyDemo_UpLoad" %>   <html xmlns="http://

Jquery uploadify上传插件使用详解_jquery

Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中的使用,您也可以点击下面的链接进行演示或下载. 首先按下面的步骤来实现一个简单的上传功能. 1 创建Web项目,命名为JQueryUploadDemo,从官网上下载最新的版本解压后添加到项目中. 2 在项目中添加UploadHandler.ashx文件用来处理文件的上传. 3 在项目中添加UploadFile文件夹,用来存放上传的文件.