在FireFox、Chrome浏览器中可以根据document.getElementById(“id_file”).files[0].size 获取上传文件的大小（字节数）使用的 api是FileReader，不多说了，看例子吧。

<html>

<head>

<title>test</title>

<script language="JavaScript">

function importPrompt()

{

    var tipMsg = "browser version too low, suggest you to upgrade or try other browsers!";

    var errMsg = "import file size is greater than 250kb!";

    if (!window.FileReader)

    {

        alert(tipMsg);

        return false;

    }

    var oFile = document.getElementById("fileupload").files[0]; // input box with type file;

    var img = document.getElementById("imgtag");

    var fileSize = 0;

    var maxsize = 250*1024;//250kb

    var reader = new FileReader();

    reader.onload = function (e)

    {

            console.log(e.total); // file size

            img.src =  e.target.result; // putting file in dom without server upload.

    };

    reader.readAsDataURL(oFile );

    fileSize = oFile.size;

    if(fileSize>maxsize)

    {

        alert(errMsg);

        return false;

    }

    else

    {

        return confirm("select yes to upload");

    }

}

</script>

</head>

<body>

<img id="imgtag" dynsrc="" src="" style="display:none" />

<form action='#' onsubmit="return importPrompt();">

<input type="file" name="ImportFile" id="fileupload" >

<input type="submit" id="button" value="restor">

</form>

</body>

</html>
请一定要去看下面的参考资料，你会受益更多
reference:

http://caniuse.com/filereader
http://blog.teamtreehouse.com/reading-files-using-the-html5-filereader-api
http://www.micmiu.com/lang/javascript/js-check-filesize/

http://stackoverflow.com/questions/1606842/how-can-i-get-a-files-upload-size-using-simple-javascript

javascript限制上传文件大小的更多相关文章

  1. javascript判断上传文件大小

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 兼容各浏览器的js判断上传文件大小

    由于项目需要,在网上找了一个JS判断上传文件大小的程序,经测试兼容IE6-,Firefox10,Opera11.,safari5.,chrome17 <!DOCTYPE html> < ...

  3. js判断上传文件大小

    下面提供三款网页特效判断上传文件大小哦,这三种方法是现在限制文件上传大小比较好的方法,可以在客户上传文件时限制上传文件大小判断处理<!doctype html public "-//w ...

  4. js检测上传文件大小

    前言: 项目中经常用到需要上传文件.照片等功能,同时需要限制所上传文件的大小.很多插件都会采用后台请求验证,前端Js校验比较少.本篇介绍一个前端JS便捷判断上传文件大小的方法. 代码很简单,关键就是怎 ...

  5. ewebeditor上传文件大小

    做项目大家都少不了要跟html在线编辑器打交道,这里我把我的一些使用经验及遇到的问题发出来和大家交流一下. Ewebeditor使用说明:一.部署方式:1.直接把压缩目录中的文件拷贝到您的网站发布目录 ...

  6. 经典JS 判断上传文件大小和JS即时同步电脑时间

    我也是新手,还是一个JS笨,有一些网站要实现的功能要自己写么? 答案是不会,去问同事大佬吧,闲简单.就在晚上看了一些其他大佬们写的JS效果, 代码很少.占用网站CPU也小的多.可以一用, 废话少扯.代 ...

  7. 解决ASP.NET上传文件大小限制

    第一种方法,主要适用于IIS6.0版本 一.修改配置Web.Config文件中的httpRuntime节点对于asp.net,默认只允许上传4M文件,增加如下配置,一般可以自定义最大文件大小.一.修改 ...

  8. 【荐】PHP上传文件大小限制大全

    在php.ini里面可以设置最大上传文件大小 解决方法: 第一: 在php.ini里面查看如下行: upload_max_filesize = 8M post_max_size = 10M memor ...

  9. nginx:413 Request Entity Too Large 及 修改 PHP上传文件大小配置

    开发环境:CentOS + Nginx + PHP + MySql + phpMyAdmin 在用 phpMyAdmin 进行 sql 数据库导入的时候,经常需要上传比较大的 sql 数据文件,而这时 ...

随机推荐

  1. java多线程系列7-停止线程

    本文主要总结在java中停止线程的方法 在java中有以下三种方法可以终止正在运行的线程: 1.使用退出标志 2.使用stop方法强行终止线程,但是不推荐,因为stop和suspend.resume一 ...

  2. java多线程系列1--线程实现与调度

    java的重要功能之一就是内部支持多线程,这一系列文章将详细剖析java多线程的基础知识 多线程概述 多线程引入 程序只有一个执行流程,所以这样的程序就是单线程程序. 假如一个程序有多条执行流程,那么 ...

  3. iOS 删除 Main.storyboard 和 LaunchScreen.storyboard

    第一步: 右键选中Main.storyboard —- delete —— Move to Trash LaunchScreen同理 第二步 点击工程名,就是最顶级目录 右侧出现general选项卡 ...

  4. Android线程管理（二）——ActivityThread

    线程通信.ActivityThread及Thread类是理解Android线程管理的关键. 线程,作为CPU调度资源的基本单位,在Android等针对嵌入式设备的操作系统中,有着非常重要和基础的作用. ...

  5. 朝花夕拾-android 从手机选择图片或拍照设置头像

    Demo源码位置:http://git.oschina.net/zj2012zy/Android-Demo/tree/master/AndroidDemo/headset 一般需要用户信息的好多的也需 ...

  6. CTF中那些脑洞大开的编码和加密

    0x00 前言 正文开始之前先闲扯几句吧,玩CTF的小伙伴也许会遇到类似这样的问题:表哥,你知道这是什么加密吗?其实CTF中脑洞密码题(非现代加密方式)一般都是各种古典密码的变形,一般出题者会对密文进 ...

  7. Maven学习遇到的第一个错误

    现在开始学习maven,我是在极客学院看的视频学习的,学习当然会遇到异常,下面是我遇到的第一个异常 [ERROR] Failed to execute goal org.apache.maven.pl ...

  8. 《HTML5与CSS3实例教程》

    <HTML5与CSS3实例教程> 基本信息 作者: (美)Brian P. Hogan 译者: 卢俊祥 丛书名: 图灵程序设计丛书 出版社:人民邮电出版社 ISBN:97871153634 ...

  9. 编写一个Java项目，定义包，在包下定义包含main方法的类，在main方法中声明8种基本数据类型的变量并赋值，练习数据类型转换。

  10. wireshark安装

    原文链接地址:http://blog.csdn.net/holandstone/article/details/47026213 Wireshark下载地址:https://www.wireshark ...