input上传文件检测文件大小
前几天在做 input[type='file'] 上传图片时，需要检测上传文件的内存大小，写了一个小demo，在此做一总结：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>文件上传大小检测</title>
</head> <body>
<input name="txtName" type="file" multiple accept="image/*" id="pic" onchange="loadImage(this)" />
<script>
function loadImage(img) {
var filePath = img.value;
var fileExt = filePath.substring(filePath.lastIndexOf("."))
.toLowerCase(); if (!checkFileExt(fileExt)) {
alert("您上传的文件不是图片,请重新上传！");
img.value = "";
return;
}
if (img.files && img.files[]) {
// alert(img);
// alert(img.files[0])
alert('你选择的文件大小' + (img.files[].size / ).toFixed() + "kb");
} else {
img.select();
var url = document.selection.createRange().text;
try {
var fso = new ActiveXObject("Scripting.FileSystemObject");
} catch (e) {
alert('如果你用的是ie8以下 请将安全级别调低！');
}
alert("文件大小为：" + (fso.GetFile(url).size / ).toFixed() + "kb");
}
}
function checkFileExt(ext) {
if (!ext.match(/.jpg|.gif|.png|.bmp/i)) {
return false;
}
return true;
}
</script>
</body> </html>
上传文件之后浏览器显示：
之后又发现了其他大牛的全能博客：
https://www.cnblogs.com/tjzhangjianjun/p/5670972.html
https://www.haorooms.com/post/input_file_leixing
input上传文件检测文件大小的更多相关文章
- input上传文件个数控制
HTML: <h3>请上传[2,5]个文件</h3> <form action="" enctype="multipart/form-dat ...
- 工作笔记——限定input上传文件对话框中能选取的文件的格式
原文:http://www.dengzhr.com/frontend/1059 input[file]标签的accept属性可用于指定上传文件的 MIME类型 . 例如,想要实现默认上传图片文件的代码 ...
- input上传文件获取文件后缀名+select通过text选中option
1.input获取后缀名 var fileName = $("input[type='file']").val();//获取上传的文件(单个) var extName = file ...
- input上传文件显示图片缩略图
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- HTML5_纯JS实现上传文件显示文件大小，文件信息，上传进度_不使用JS库
前台 html <input type="file" id="_netLogo" onchange="fileSelected();" ...
- 监听 input上传文件， 获取文件名称，
<div class="import-box pr" > <span class="model-address-txt">导入文件:&l ...
- input 上传文件的判断
<html> <head> <meta charset='utf-8'> <meta name="viewport" content=&q ...
- input 原生上传文件（type = file）
1.表单上传文件的步骤: - 1)设置enctype 默认为:enctype="application/x-www-form-urlencoded"(一般不设置) 若要表单中有需要 ...
- (转)django上传文件
本文转自:http://www.cnblogs.com/linjiqin/p/3731751.html 另: 本文对原文做了适当修改 更为详细的介绍可以参考官方文档. emplate html(模板 ...
随机推荐
- java RPC系列之二 HTTPINVOKER
java RPC系列之二 HTTPINVOKER 一.java RPC简单的汇总 java的RPC得到技术,基本包含以下几个,分别是:RMI(远程方法调用) .Caucho的Hessian 和 Bu ...
- 3D集合图元：最小边界框/包围盒（boundingbox）
对于2D边界框的应用时比较广泛地,它为一个简单匹配建立了很小的计算规则,3D模型的boundingbox则比较困难,计算代价较大.对于PCL库的使用则降低了计算难度,三维数值化降低了建模过程,可以使用 ...
- Here comes Treble: A modular base for Android
On the Android team, we view each dessert release as an opportunity to make Android better for our u ...
- 如何处理CSS3属性前缀（转载）总结
今天闲来无聊,重新来说说CSS3前缀的问题.在春节前和@一丝姐姐说起Sass中有关于gradient的mixins.姐姐说: 为什么还要用mixin呢?为什么不使用Autoprefixer?使用Aut ...
- mysql备份脚本二（带日志）
#!/bin/bashdb_PATH='/shareSAN/mysqldata/ocs/mysql_back_wjf' #备份文件保存的路径#db_DBNAME='sz_ocs' #备份的数据库名db ...
- SQL中group by的理解
1.group by A,B,C的分组顺序与汇总: group by A,B,C的分组顺序与order by A,B,C的排序一样.即先按A,如果A一样,则再按B,以此类推. 而数据将在最后指定的分组 ...
- jquery.lazyload滚动不起作用
昨天同事在开发图片懒加载功能时用到了lazyload,使用相当标准,然而结果却不如人意,在滚动时未能起作用.引用https://cdn.bootcss.com/jquery_lazyload/1.9. ...
- [Ynoi2019模拟赛]Yuno loves sqrt technology II
题目大意: 给定一个长为\(n\)的序列,\(m\)次询问,每次查询一个区间的逆序对数. 32MB. 解题思路: 出题人题解 众所周知lxl是个毒瘤,Ynoi道道都是神仙题 二次离线莫队. 对于每个区 ...
- redi通过哨兵sentinel实现主从切换
本次实验主要为了让哨兵监听redis主从复制,当主节点关闭后,哨兵会选举一台从节点成为主节点,并且让其他从节点变成新主节点得从节点 本次理论需要三台机器,一主两从,为了方便用一台服务器开启三个实例,一 ...
- Spring Boot浅谈(是什么/能干什么/优点和不足)
1. Spring Boot是什么,解决哪些问题 1) Spring Boot使编码变简单 2) Spring Boot使配置变简单 3) Spring Boot使部署变简单 4) Spring Bo ...