<!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. DB_WRITER_PROCESSES与LOG_ARCHIVE_MAX_PROCESSES

    DB_WRITER_PROCESSES Property  Description Parameter type  Integer Default value  1 or CPU_COUNT / 8, ...

  2. Ehcache中配置详解

    <ehcache xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLoc ...

  3. 14.5.2.2 autocommit, Commit, and Rollback

    14.5.2.2 autocommit, Commit, and Rollback 在InnoDB,所有的用户活动发生在一个事务里, 如果自动提交模式是启用的, 每个SQL语句形成一个单独的事务.默认 ...

  4. 常用的用户状态命令包括：whoami、id、groups、newgrp 等

    用户状态命令 常用的用户状态命令包括:whoami.id.groups.newgrp 等.

  5. Cut the Cake(大数相乘)

      MMM got a big big big cake, and invited all her M friends to eat the cake together. Surprisingly o ...

  6. HDU 5410 CRB and His Birthday

    题目大意: 一个人要去买礼物,有M元.有N种礼物,每件礼物的价值是Wi, 你第i件礼物买k个 是可以得到 Ai * k + Bi 个糖果的. 问怎么才能使得你得到的糖果数目最多.   其实就是完全背包 ...

  7. C#在父窗口中调用子窗口的过程(无法访问已释放的对象)异常，不存在从对象类型System.Windows.Forms.DateTimePicker到已知的托管提供程序本机类型的映射。

    一:C#在父窗口中调用子窗口的过程(无法访问已释放的对象)异常 其实,这个问题与C#的垃圾回收有关.垃圾回收器管 理所有的托管对象,所有需要托管数据的.NET语言(包括 C#)都受运行库的 垃圾回收器 ...

  8. DIV+CSS布局问题：一个宽度不确定的DIV里面放三个水平对齐的DIV，左右两个DIV宽度固定为150px，中间那个DIV充满剩余的宽度

    一个入门的DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度. 说明:代码非真实情况下使用,所以直接简单. 没耐 ...

  9. 微软Azure Services Bus中的工作流

    在Azure Services Platform上对于工作流服务的支持,一直是我很感兴趣的内容.当然也是疑问 比较多的领域.鉴于这方面的资料太少,所以今天就从AzureServicesKit中的一个D ...

  10. 谈一下spring 的理解

    spring,大家基本都在使用,两个核心: 声明式事务AOP : 控制反转依赖注入IOC: 以前对控制反转和依赖注入很模糊,现在大概理解了意思,控制反转,有spring容易来控制bean 的创建,我们 ...