JavaScript检测上传文件大小的方法


Posted in Javascript onJuly 22, 2015

本文实例讲述了JavaScript检测上传文件大小的方法。分享给大家供大家参考。具体如下:

通过JS客户端代码限制用户上传文件的大小,但是客户端的验证只是辅助的,服务器端一定还要再做验证

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta name="DEscription" contect="my code demo" />
 <meta name="Author" contect="Michael@3water.com" />
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>js check file size @ 3water.com</title>
 </head>
 <body>
  <img id="tempimg" dynsrc="" src="" style="display:none" />
  <input type="file" name="file" id="fileuploade" size="40" />
  <input type="button" name ="check" value="checkfilesize" onclick="checkfile()"/>
 </body>
 <script type="text/javascript">
  var maxsize = 2*1024*1024;//2M
  var errMsg = "上传的附件文件不能超过2M!!!";
  var tipMsg = "您的浏览器暂不支持计算上传文件的大小,确保上传文件不要超过2M,建议使用IE、FireFox、Chrome浏览器。";
  var browserCfg = {};
  var ua = window.navigator.userAgent;
  if (ua.indexOf("MSIE")>=1){
   browserCfg.ie = true;
  }else if(ua.indexOf("Firefox")>=1){
   browserCfg.firefox = true;
  }else if(ua.indexOf("Chrome")>=1){
   browserCfg.chrome = true;
  }
  function checkfile(){
   try{
     var obj_file = document.getElementById("fileuploade");
     if(obj_file.value==""){
      alert("请先选择上传文件");
      return;
     }
     var filesize = 0;
     if(browserCfg.firefox || browserCfg.chrome ){
      filesize = obj_file.files[0].size;
     }else if(browserCfg.ie){
      var obj_img = document.getElementById('tempimg');
      obj_img.dynsrc=obj_file.value;
      filesize = obj_img.fileSize;
     }else{
      alert(tipMsg);
     return;
     }
     if(filesize==-1){
      alert(tipMsg);
      return;
     }else if(filesize>maxsize){
      alert(errMsg);
      return;
    }else{
     alert("文件大小符合要求");
      return;
    }
   }catch(e){
    alert(e);
   }
  }
 </script>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
一些常用的JavaScript函数(json)附详细说明
May 25 Javascript
DOM和XMLHttpRequest对象的属性和方法整理
Jan 04 Javascript
Prototype源码浅析 Enumerable部分之each方法
Jan 16 Javascript
jquery插件jTimer(jquery定时器)使用方法
Dec 23 Javascript
jQuery实现根据滚动条位置加载相应内容功能
Jul 18 Javascript
JS常用算法实现代码
Nov 14 Javascript
jQuery学习笔记之入门
Dec 14 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
Sep 18 Javascript
vue webuploader 文件上传组件开发
Sep 23 Javascript
vue中的面包屑导航组件实例代码
Jul 01 Javascript
JS实现移动端在线签协议功能
Aug 22 Javascript
vue 中使用print.js导出pdf操作
Nov 13 Javascript
JavaScript动态改变div属性的实现方法
Jul 22 #Javascript
PHP结合jQuery实现的评论顶、踩功能
Jul 22 #Javascript
PHP结合jQuery实现红蓝投票功能特效
Jul 22 #Javascript
用Move.js配合创建CSS3动画的入门指引
Jul 22 #Javascript
js判断手机端(Android手机还是iPhone手机)
Jul 22 #Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
Jul 21 #Javascript
Javascript实现获取及设置光标位置的方法
Jul 21 #Javascript
You might like
php定时删除文件夹下文件(清理缓存文件)
2013/01/23 PHP
php函数array_merge用法一例(合并同类数组)
2013/02/03 PHP
几道坑人的PHP面试题 试试看看你会不会也中招
2014/08/19 PHP
PHP cookie,session的使用与用户自动登录功能实现方法分析
2019/06/05 PHP
解决laravel5.4下的group by报错的问题
2019/10/16 PHP
javascript 学习之旅 (1)
2009/02/05 Javascript
手机平板等移动端适配跳转URL的js代码
2014/01/25 Javascript
使用Sticker.js实现贴纸效果
2015/01/28 Javascript
JS中Location使用详解
2015/05/12 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
2016/05/17 Javascript
javascript 判断是否是微信浏览器的方法
2016/10/09 Javascript
利用fecha进行JS日期处理
2016/11/21 Javascript
SelecT下拉框选中和取值的解决方法
2016/11/22 Javascript
JavaScript数据结构学习之数组、栈与队列
2017/05/02 Javascript
js实现单张图片平移切换效果
2017/10/11 Javascript
Vue项目中设置背景图片方法
2018/02/21 Javascript
React 组件间的通信示例
2018/06/14 Javascript
[01:08]2014DOTA2展望TI 剑指西雅图LGD战队专访
2014/06/30 DOTA
[09:13]DOTA2-DPC中国联赛 正赛 Ehome vs Magma 选手采访 1月19日
2021/03/11 DOTA
python和shell变量互相传递的几种方法
2013/11/20 Python
深入源码解析Python中的对象与类型
2015/12/11 Python
利用python生成一个导出数据库的bat脚本文件的方法
2016/12/30 Python
Python向MySQL批量插数据的实例讲解
2018/03/31 Python
python实现爬取图书封面
2018/07/05 Python
浅析Python3中的对象垃圾收集机制
2019/06/06 Python
Python3实现监控新型冠状病毒肺炎疫情的示例代码
2020/02/13 Python
Pytorch之扩充tensor的操作
2021/03/04 Python
雅高酒店中国:Accorhotels.com China
2018/03/26 全球购物
可以使用抽象函数重写基类中的虚函数吗
2013/06/02 面试题
经济信息管理专业大学生求职信
2013/09/27 职场文书
物业工作计划书
2014/01/10 职场文书
《青山处处埋忠骨》教学反思
2014/04/22 职场文书
2015年植树节活动总结
2015/02/06 职场文书
2015年幼儿园班务工作总结
2015/05/12 职场文书
公安纪律作风整顿心得体会
2016/01/23 职场文书
修改Nginx配置返回指定content-type的方法
2022/09/23 Servers