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"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      $("#myFile").change(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格式");
          $("#fileType").text("")
          $("#fileSize").text("");
          return false;
        } else { $("#fileType").text(ext) }
        var file_size = 0;
        if ($.browser.msie) {
          var img = new Image();
          img.src = filepath;
          while (true) {
            if (img.fileSize > 0) {
              if (img.fileSize > 3 * 1024 * 1024) {
                alert("图片不大于100MB。");
              } else {
                var num03 = img.fileSize / 1024;
                num04 = num03.toFixed(2)
                $("#fileSize").text(num04 + "KB");
              }
              break;
            }
          }
        } else {
          file_size = this.files[0].size;
          var size = file_size / 1024;
          if (size > 10240) {
            alert("上传的图片大小不能超过10M！");
          } else {
            var num01 = file_size / 1024;
            num02 = num01.toFixed(2);
            $("#fileSize").text(num02 + " KB");
          }
        }
        return true;
      });
    });
  </script>
  <title>无标题文档</title>
</head>
<body>
  <table width="500" cellspacing="0" cellpadding="0">
    <tr>
      <td width="72" id="fileType">
      </td>
      <td width="242">
        <input type="file" name="myFile" id="myFile" />
      </td>
      <td width="184" id="fileSize" class="fileSize">
      </td>
    </tr>
  </table>
</body>
</html>

以上就是小编为大家带来的jquery实现上传文件大小类型的验证例子(推荐)全部内容了，希望大家多多支持我们~

赞 (0)

相关推荐

  • jQuery实现文件上传进度条特效

    jQuery实现文件上传进度条特效

    上传进度条通常是由前面jquery加后端了脚本器脚本来实现了,今天我们介绍的是一款基本php+jQuery实现文件上传进度条效果的例子,具体细节如下. 最近呢,一个项目做一个进度条的效果出来,这个之前还真没做过.刚好这周没什么东西了,就拿这个来充一下数吧. 文件上传,得先准备一个"按钮": 这个看上去还是不错的吧,实现也是很简单的: <span class="upload-span">开始上传文件</span> <button>太

  • jQuery+ajax简单实现文件上传的方法

    本文实例讲述了jQuery+ajax简单实现文件上传的方法.分享给大家供大家参考,具体如下: 可以通过ajax来提交表单,而不会刷新页面.主要使用的方法是 $("#formID").ajaxSubmit()方法. 1.要引入js插件 需要下载的附件:jquery.form.js 2.页面代码: <script src="project/js/jquery.form.js" type="text/javascript"></scr

  • 原生JS和jQuery版实现文件上传功能

    本文实例分享了原生JS版和jQuery 版实现文件上传功能的例子,供大家参考,具体内容如下 <!doctype html> <html lang="zh"> <head> <meta charset="utf-8"> <title>HTML5 Ajax Uploader</title> <script src="jquery-2.1.1.min.js"></

  • Jquery结合HTML5实现文件上传

    1.利用Jquery使用HTML5的FormData属性实现对文件的上传 在HTML5以前我们如果需要实现文件上传服务器等功能的时候,有时候我们不得不依赖于FLASH去实现,而在HTML5到来之后,我们很容易的实现对文件的上传,只需要利用HTML5的一个FormData属性,结合Jquery就很容易实现文件的上传,而且读取文件的上传进度,下面这个上传案例就是基于上面所说的实现的,下面我将所所有的JS和CSS以及HTML页面代码放在下面. 注意事项:FormData属性必须依赖于HTML5,所以如

  • 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统计上传文件大小的方法

    jQuery统计上传文件大小的方法

    本文实例讲述了jQuery统计上传文件大小的方法.分享给大家供大家参考.具体如下: 对于现代浏览器(支持html5)来说,在客户端统计上传文件的大小,可以通过$(selector)[0].files[0].size来实现.但在老版本的IE浏览器中,比如IE7,IE8或IE9,却不支持这种做法,但可以借助ActiveXObject对象来实现. 复制代码 代码如下: <input type="file" name="f" id="f" valu

  • jquery检测上传文件大小示例

    本文实例讲述了jquery检测上传文件大小.分享给大家供大家参考,具体如下: google了很久,基本上都是用 activeX 来实现-至于为什么不行,这个不多说,说一下以下方法: 已经测试通过的浏览器:IE6+,firefox,chrome,其中 firefox 和 chrome 要能支持 HTML5. <html> <head> <meta http-equiv="Content-Type" content="text/html; chars

  • 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="

  • 真正好用的js验证上传文件大小的简单方法

    真正好用的js验证上传文件大小的简单方法

    最近使用到一个文件上传功能,发现恶意上传一个2G文件时,后台处理响应较慢,遂想到能否使用js来进行客户端的验证.但查阅网上多处资料,均使用 ActiveXObject("Scripting.FileSystemObject"); 的方法,该方法需要将Internet选项中安全级别提高,启用一个系统本身不推荐的选项,会出现如下非常不友好的提示: 所以这边并没有用到,而是寻求其他方法. 这边新的思路是img标签中的dynsrc属性. 在FireFox.Chrome浏览器中可以根据docum

  • 限制上传文件大小和格式的jQuery插件实例

    本文实例讲述了限制上传文件大小和格式的jQuery插件.分享给大家供大家参考.具体分析如下: 在客户端上传文件,通常需要限制文件的尺寸和格式,最常用的做法是使用某款插件,一些成熟的插件的确界面好看,且功能强大,但美中不足的是:有时候会碰到浏览器兼容问题.本篇就来写一个"原生态"的jQuery插件,使之能限制上传文件的大小和格式. 首先,写一个名称为checkFileTypeAndSize.js的插件.通过判断当前文件的后缀名是否被包含在预先设置所允许的后缀名数组中,来限制文件格式:通过

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

    本文实例讲述了JS简单验证上传文件类型的方法.分享给大家供大家参考,具体如下: function checkType(){ //得到上传文件的值 var fileName=document.getElementById("file_logo").value; //返回String对象中子字符串最后出现的位置. var seat=fileName.lastIndexOf("."); //返回位于String对象中指定位置的子字符串并转换为小写. var extensi

  • jQuery Plupload上传插件的使用

    jQuery Plupload上传插件的使用

     首先下载plupload->http://www.plupload.com 因为Plupload可配置参数比较多,所以这里讲解最常用的,结合jquery-ui展示的界面!如下: Plupload默认支持html5,flash,silverlight,html4,四种上传方式,按照顺序进行加载,如果浏览器不支持html5则会选择flash...到最后html4, 如果不需要某种上传方式,在配置里面不写即可! 直接上代码 <body> <div id="uploader&q

  • Struts2修改上传文件大小限制方法解析

    首先struts上传最大大小由两个地方决定.  · struts.multipart.maxSize决定整个post的form最大是多大,所以这个限制是最初的.默认大小是接近2M,在struts的default.properties中定义.  · fileuploadInterceptor中可以定义maximumSize最大文件大小. 最初定义在struts.xml中定义了没有生效,后来发现在工程中的struts.properties中已经设置过,所以后来被覆盖了,更改struts.proper

  • Jquery uploadify上传插件使用详解

    Jquery uploadify上传插件使用详解

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

随机推荐