1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>web前端对上传的文件进行类型大小判断的js自定义函数</title>
  6. </head>
  7. <body>
  8.  
  9.     <form>
  10.         <input type="file" id="fileId">
  11.         <input type="button" value = "提交" onclick="checkFileSizeAndType(10*1024*1024,['gif','jpg','png'],'fileId');">
  12.     </form>
  13.     <script>
  14.     //参数说明
  15.     //maxSize 代表允许最大上传的文件大小，单位是字节
  16.     //allowType 代表允许上传的文件类型（后缀）
  17.     //fileId   代表input type=file 框 的id
  18.     function checkFileSizeAndType(maxSize,allowType,fileId) {
  19.                 //默认大小
  20.                 if(!maxSize){
  21.                     maxSize=10*1024*1024;
  22.                 }
  23.                 //默认类型
  24.                 if(!allowType){
  25.                     allowType=new Array('jpg','png');
  26.                 }
  27.                 //js通过id获取上传的文件对象
  28.                 var file = document.getElementById(fileId);
  29.                 var types =allowType;
  30.  
  31.                 var fileInfo = file.files[0];
  32.                 if(!fileInfo){
  33.                     alert("请选择文件！");
  34.                     return false;
  35.                 }
  36.                 var fileName = fileInfo.name;
  37.  
  38.                 //获取文件后缀名
  39.                 var file_typename = fileName.substring(
  40.                         fileName.lastIndexOf('.') + 1, fileName.length);
  41.  
  42.                 //定义标志是否可以提交上传
  43.                 var isUpload = true;
  44.                 //定义一个错误参数：1代表大小超出 2代表类型不支持
  45.                 var errNum =0;
  46.                 if (fileInfo) {
  47.                     if (fileInfo.size > maxSize) {
  48.                         isUpload = false;
  49.                         errNum=1;
  50.                     } else {
  51.                         for ( var i in types) {
  52.                             if (types[i] == file_typename) {
  53.                                 isUpload = true;
  54.                                 return isUpload;
  55.                             } else {
  56.                                 isUpload = false;
  57.                                 errNum=2;
  58.                             }
  59.                         }
  60.  
  61.                     }
  62.  
  63.                 }
  64.                 //对错误的类型进行对应的提示
  65.                 if (!isUpload) {
  66.                     if(errNum==1){
  67.                         var size = maxSize/1024/1024;
  68.                         alert("上传的文件必须为小于"+size+"M的图片！");
  69.                     }else if(errNum==2){
  70.                         alert("上传的"+file_typename+"文件类型不支持！只支持"+types.toString()+"格式");
  71.                     }else{
  72.                         alert("没有选择文件");
  73.                     }
  74.                     file.value="";
  75.                     return isUpload;
  76.  
  77.                 }
  78.             }
  79.  
  80.     </script>
  81. </body>
  82. </html>

还有很多不足的地方，大家多多提意见喔！

web前端对上传的文件进行类型大小判断的js自定义函数的更多相关文章

  1. java web service 上传下载文件

    1.新建动态web工程youmeFileServer,新建包com,里面新建类FileProgress package com; import java.io.FileInputStream; imp ...

  2. 转载 jQuery和js自定义函数和文件的方法（全网最全）

    jQuery和js自定义函数和文件的方法(全网最全)    版权声明:本文为像雾像雨又像风_http://blog.csdn.net/topdandan的原创文章,未经允许不得转载. https:// ...

  3. web api 如何通过接收文件流的方式,接收客户端及前端上传的文件

    服务端接收文件流代码: public async Task<HttpResponseMessage> ReceiveFileByStream() { var stream = HttpCo ...

  4. web前端:上传文件夹(需支持多浏览器)

    在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 先说下要求: PC端全平台支持,要求支持Windows,Mac,Linux 支持所 ...

  5. web页面上传大文件有没有好的解决方案

    本人在2010年时使用swfupload为核心进行文件的批量上传的解决方案.见文章:WEB版一次选择多个文件进行批量上传(swfupload)的解决方案. 本人在2013年时使用plupload为核心 ...

  6. web uploader 上传大文件总结

    这里只写后端的代码,基本的思想就是,前端将文件分片,然后每次访问上传接口的时候,向后端传入参数:当前为第几块文件,和分片总数 下面直接贴代码吧,一些难懂的我大部分都加上注释了: 上传文件实体类: 看得 ...

  7. java web图片上传和文件上传

    图片上传和文件上传本质上是一样的,图片本身也是文件.文件上传就是将图片上传到服务器,方式虽然有很多,但底层的实现都是文件的读写操作. 注意事项 1.form表单一定要写属性enctype=" ...

  8. 怎么实现web端上传超大文件

    1.介绍enctype enctype 属性规定发送到服务器之前应该如何对表单数据进行编码. enctype作用是告知服务器请求正文的MIME类型(请求消息头content-type的作用一样) 1. ...

  9. php 上传文件并对上传的文件进行简单验证（错误信息，格式（防伪装），大小，是否为http上传）

    <body> <?php /** *验证错误 *如果有错,就返回错误,如果没错,就返回null */ function check($file) { //1:验证是否有误 if($f ...

随机推荐

  1. Java NIO API详解

    在JDK 1.4以前,Java的IO操作集中在java.io这个包中,是基于流的同步(blocking)API.对于大多数应用来说,这样的API使用很方便,然而,一些对性能要求较高的应用,尤其是服务端 ...

  2. mysql安装2

    linux下安装mysql-5.1.51.tar.gz (2010-10-27 10:59:26) 转载▼ 标签: mysql 数据库 tar.gz安装 杂谈 分类: Mysql数据库 MySQL h ...

  3. 【HDOJ】1813 Escape from Tetris

    bfs预处理一点到边界的最小距离,IDA*求出可行方案.注意按字典序初始化dir数组.并且存在中间点全为1,边界含0的可能性(wa了很多次).此时不输出任何命令. /* 1813 */ #includ ...

  4. jquery禁用右键、文本选择功能、刷新

    //禁用右键.文本选择功能.刷新 $(document).bind(“contextmenu”,function(){return false;}); $(document).bind(“select ...

  5. 【动态规划】Vijos P1143 三取方格数（NOIP2000提高组）

    题目链接: https://vijos.org/p/1143 题目大意: NxN的矩阵,每个值只能取一次,从(1,1)走到(n,n)走三次能取得的最大值. 题目思路: [动态规划] f[x1][y1] ...

  6. Delphi NativeXml用法攻略 转

    NativeXml可以在官网上下载,下载后将文件夹放在指定地方,打开DELPHI在其环境变量中引用NativeXml路径,然后在程序中引用NativeXml单元,我们就可以使用NativeXml了. ...

  7. iOS __block用法

    没有__block qualifier的primitive c types会直接在创建block的时候被capture到block里.有__block qualifier的话,会在调用block的时候 ...

  8. bzoj1588 [HNOI2002]营业额统计（Treap）

    1588: [HNOI2002]营业额统计 Time Limit: 5 Sec  Memory Limit: 162 MBSubmit: 11485  Solved: 4062[Submit][Sta ...

  9. DFS Zoj 2110

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=2110 //2110 #include<stdio.h> #in ...

  10. [Locked] Smallest Rectangle Enclosing Black Pixels

    An image is represented by a binary matrix with 0 as a white pixel and 1 as a black pixel. The black ...