<!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. 一点BPXA的思考

    懂的人自然懂... BPXA功能配置 这个概念现在还有印象,记录下来: 一,BPXA是用于BP使用第三方资源的.如使用ORACLE数据库,就是在XA里配置.它的特征是以<xa>开头 二,B ...

  2. 跨平台网络通信与服务器框架 acl 3.2.0 发布

    acl 3.2.0 版本发布了,acl 是 one advanced C/C++ library 的简称,主要包括网络通信库以及服务器框架库等功能,支持 Linux/Windows/Solaris/F ...

  3. 《深入Linux内核》 UNIX的一些故事

    Unix文件的类型1.普通文件2.目录3.符号链接4.面向块的设备文件5.面向字符的设备文件6.管道和命名管道7.套接字 点评:不明觉厉 打开文件进程只能访问“打开的”文件.为了打开一个文件,进程调用 ...

  4. 安装zabbix2.2.3

    系统版本:CentOS 6.3_x86_64 zabbix版本:zabbix-2.2.3 zabbix服务端IP:172.16.10.72 1.yum安装LAMP环境 # yum -y install ...

  5. 高效算法——E - 贪心-- 区间覆盖

    E - 贪心-- 区间覆盖 题目链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=85904#problem/E 解题思路: 贪心思想, ...

  6. winscp自动执行脚本

    我们经常使用WinSCP工具通过sftp协议上传获取文件,本文描述通过bat批量处理文件. 首先,我们打开dos命令窗口使用 cd \d :D\WinSCP 打开WinSCP安装目录 上传文件: wi ...

  7. Teacher YYF - POJ 3746（打表........）

    1.名词和介词可以被用作主语或宾语 名词->n  介词->pron 2.当使用名词时,必须有冠词在它前面 n+art(冠词) 3.名词可以被一个形容词修饰,动词可以被一个副词修饰 adj+ ...

  8. Linux 环境变量 $PATH

    我们知道查阅文件属性的指令 ls 完整文件名为:/bin/ls(这是绝对路径),那为什么可以在任何地方执行/bin/ls 这个指令呢?  为什么在任何目录下输入 ls 就一定可以显示出一些讯息而不会说 ...

  9. CodeForces 27D - Ring Road 2 构图2-sat..并输出选择方案

        题意             n个数1~n按顺序围成一个圈...现在在某些两点间加边..边可以加在圈内或者圈外..问是否会发生冲突?如果不发生冲突..输每一条边是放圈内还是圈外.     题解 ...

  10. 使用IntelliJ IDEA开发SpringMVC网站

    连接:https://my.oschina.net/gaussik/blog/385697