<!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">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>web前端对上传的文件进行类型大小判断的js自定义函数</title>

</head>

<body>

    <form>

        <input type="file" id="fileId">

        <input type="button" value = "提交" onclick="checkFileSizeAndType(10*1024*1024,['gif','jpg','png'],'fileId');">

    </form>

    <script>

    //参数说明

    //maxSize 代表允许最大上传的文件大小，单位是字节

    //allowType 代表允许上传的文件类型（后缀）

    //fileId   代表input type=file 框 的id

    function checkFileSizeAndType(maxSize,allowType,fileId) {

                //默认大小

                if(!maxSize){

                    maxSize=10*1024*1024;

                }

                //默认类型

                if(!allowType){

                    allowType=new Array('jpg','png');

                }

                //js通过id获取上传的文件对象

                var file = document.getElementById(fileId);

                var types =allowType;

                var fileInfo = file.files[0];

                if(!fileInfo){

                    alert("请选择文件！");

                    return false;

                }

                var fileName = fileInfo.name;

                //获取文件后缀名

                var file_typename = fileName.substring(

                        fileName.lastIndexOf('.') + 1, fileName.length);

                //定义标志是否可以提交上传

                var isUpload = true;

                //定义一个错误参数：1代表大小超出 2代表类型不支持

                var errNum =0;

                if (fileInfo) {

                    if (fileInfo.size > maxSize) {

                        isUpload = false;

                        errNum=1;

                    } else {

                        for ( var i in types) {

                            if (types[i] == file_typename) {

                                isUpload = true;

                                return isUpload;

                            } else {

                                isUpload = false;

                                errNum=2;

                            }

                        }

                    }

                }

                //对错误的类型进行对应的提示

                if (!isUpload) {

                    if(errNum==1){

                        var size = maxSize/1024/1024;

                        alert("上传的文件必须为小于"+size+"M的图片！");

                    }else if(errNum==2){

                        alert("上传的"+file_typename+"文件类型不支持！只支持"+types.toString()+"格式");

                    }else{

                        alert("没有选择文件");

                    }

                    file.value="";

                    return isUpload;

                }

            }

    </script>

</body>

</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. 有趣的TWinControl.RecreateWnd，并分析在哪些场合使用

    CM_RECREATEWND = CM_BASE + 51; // TWinControl里有对应函数procedure CMRecreateWnd(var Message: TMessage); m ...

  2. Netty4.0学习笔记系列之三：构建简单的http服务（转）

    http://blog.csdn.net/u013252773/article/details/21254257 本文主要介绍如何通过Netty构建一个简单的http服务. 想要实现的目的是: 1.C ...

  3. Java关键字this的用法总结

    大飞_Rflyee:http://blog.csdn.net/rflyee/article/details/12057289 首先了解一下java中类的引用, 对于java中类的引用,可以这样理解: ...

  4. 【HDOJ】3451 Beat drop

    BFS.当水滴破裂飞溅后,直到碰到水滴才会停止(观察case1).同时,考虑当水滴飞溅到点(x,y)并且该点同一时间破裂的情况,该水滴算作吸收. /* 3451 */ #include <ios ...

  5. bzoj2424

    比较简单的费用流,一目了然 ; type node=record next,point,flow,cost:longint; end; ..] of node; q:..] of longint; p ...

  6. Linux Kernel ‘kvm_set_memory_region()’函数本地提权漏洞

    漏洞名称: Linux Kernel ‘kvm_set_memory_region()’函数本地提权漏洞 CNNVD编号: CNNVD-201306-343 发布时间: 2013-06-20 更新时间 ...

  7. hdu4696 想法题

    就像1.2元人民币可以凑成任意你想要的面值一样.由于一定会有环,只要有C[i] == 1 就可以造成任何数.够坑吧 #include <cstdio> #include <cstri ...

  8. hdoj 2102 A计划

    A计划 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  9. Mysql学生管理系统：表的建立，外键一对多，多对多关系，中间关联表的建立

    学生管理系统 管理员注册/登录/注销 注册班级(班级详细信息) 注册学生信息 查看班级信息/查看老师资料 教师注册/注销  查看教师资料  查看学生资料  根据名称/班级/ 查看学生详细信息--支持模 ...

  10. cocos2d-x项目过程记录(跨平台iOS和Android)

    (原创作品,欢迎转载,注明出处,谢谢:http://www.cnblogs.com/binxindoudou/admin/EditPosts.aspx?postid=3205249) 1.配置环境,重 ...