<!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. STM32F10x 学习笔记5（USART实现串口通讯 1）

    STM32F10x 系列单片机中都包含了USART 模块,所谓USART,就是通用同步异步收发器.通用同步异步收发器(USART)提供了一种灵活的方法与使用工业标准NRZ异步串行数据格式的外部设备之间 ...

  2. Cortex-M0系统滴答定时器Systick详解

    上图是LPC1114系统滴答定时器(SysTick)的结构图.系统滴答定时器位于Cortex-M0内核中,也就是说,不论是LPC1114,还是其他的Cortex-M0内核单片机,都有这个系统定时器.其 ...

  3. Winform 　隐藏程序窗口

    internal class HideOnStartupApplicationContext : ApplicationContext { private Form mainFormInternal; ...

  4. [置顶] 推荐12款很棒的HTML5开发框架和开发工具

    HTML5 在不同的领域让网页设计更强大的.快速,安全,响应式,互动和美丽,这些优点吸引更多的 Web 开发人员使用 HTML5.HTML5 有许多新的特性功能,允许开发人员和设计师创建应用程序和网站 ...

  5. android之apk自动更新解析包失败问题

    在apk自动更新(相关问题可以看我的博客http://blog.csdn.net/caicongyang) 从服务器下载完成后,点击notification提示安装时,每次都报解析包失败错误!首先我想 ...

  6. Adjacent Bit Counts（动态规划 三维的）

    /** 题意: 给出一个01串 按照题目要求可以求出Fun(X)的值 比如: 111 Fun(111)的值是2: 输入: t (t组测试数据) n k (有n位01串 Fun()的值为K) 输出:有多 ...

  7. Threading Module源码概述(二)

    在threading 模块中,提供了列举当前所有子线程的操作.threading.enumerate.这个操作很简单,就是将_active和_limbo中维护的线程集合的信息输出. def enume ...

  8. Scrapy：Python的爬虫框架

    网络爬虫,是在网上进行数据抓取的程序,使用它能够抓取特定网页的HTML数据.虽然我们利用一些库开发一个爬虫程序,但是使用框架可以大大提高效率,缩短开发时间.Scrapy是一个使用Python编写的,轻 ...

  9. Hibernate二 映射 注解 一级缓存

    Hibernate映射1.@Entity 被该注解修饰的POJO类是一个实体,可以用name属性指定该实体类的名称,系统默认以该类的类名作为实体类的名称.2.@Table 指定持久化类所映射的表,它的 ...

  10. mysql 添加定时任务

    之前定时任务都是用quartz 或者spring的任务调度来做的,易于管理,但是要写代码加 配置,其实mysql 自带了job ,先创建一个存储过程