<!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. （转载）PHP使用empty检查函数返回结果时报Fatal error: Can't use function return value in write context的问题

    (转载)http://be-evil.org/post-153.html PHP开发时,当你使用empty检查一个函数返回的结果时会报错:Fatal error: Can't use function ...

  2. 【动态规划】【缩点】NCPC 2014 G Outing

    题目链接: http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1793 题目大意: 一辆公交车,上面M个座位,N个人(M<=N<=1000) ...

  3. 数据结构——UVA 1600 机器人巡逻

    描述 A robot has to patrol around a rectangular area which is in a form of mxn grid (m rows and n colu ...

  4. Android SDK更新失败最新解决方案

    解决方案: 将https修改为http://在Android SDK manager中,的tools文件夹下,选择options...选项, 勾选 Force https//... sources t ...

  5. top -bcn -1

    ^[[?1h^[=^[[?25l^[[H^[[2J^[(B^[[mtop #!/bin/bash#echo 性能数据捕捉时间: `date +%Y-%m-%d_%H:%M:%S` \n >> ...

  6. Solr与Tomcat的整合

    solr与tomcat整合有两种方法: 方法一:其整合步骤如下: 1.将solr中的example中的solr拷贝到要作为服务器的位置(我当前创建的目录为D:\Develop\solr\home) 2 ...

  7. npm常用命令总结

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #000000; background-color: rgba(2 ...

  8. HDU - 4815 Little Tiger vs. Deep Monkey （长春赛区C题）

    题意:有A,B两个人.n道题目.每题有相应的分数.B答对题目的概率是0.5.求A不输给B的概率不小于P要拿的最低分数 思路:DP,dp[i][j]来表示B答了前i题后分数为j的概率,,然后通过B的概率 ...

  9. Eclipse导入Gradle时报错：SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable

    百度查到http://stackoverflow.com/questions/19794200/gradle-android-and-the-android-home-sdk-location 按照其 ...

  10. Scriptcase演示程序

    为了方便大家对Scriptcase有一个非常直观的印象,现在将Scriptcase的示例程序进行了适当汉化,并且放在互联网上,您可以直接点击这个地址访问. 需要说明的是,示例程序中提供的范例,基本上都 ...