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(模板 ...
随机推荐
- 【Oracle】创建概要文件
任务1:创建profile 创建概要文件my_profile 1)密码复杂性要求:启用: 2)密码长度最小值:8位: 3)密码错误输入三次,锁定账户,2分钟后自动解锁 --创建密码复杂度校验函数 @? ...
- NOSQL:redis mongodb
redis 1 概念及其基本操作:http://blog.nosqlfan.com/html/3139.html 2 安装配置及其操作:http://blog.fens.me/linux-redis- ...
- 基准测试-jmeter压力测试activeMQ之一环境安装配置
jmeter压力测试activeMQ 摘要:linux(CentOS)单机activeMQ安装.window(2008Server)Jmeter配置activeMQ包.Jmeter配置linux监控 ...
- 02--C编程细节整理（一）
用C语言比较多,这篇是平时攒下的.有些内容在工作后可能会很常见,但是不用容易忘,所以就写篇博客吧. 1. printf的用法 %*可以用来跳过字符,可以用于未知缩进.像下面一样. for ...
- HTML 引入 CSS、JS 的三种方式
描述部分按 CSS 来的,其实 JavaScript 也一样,具体区别看代码 外部样式表 当样式需要被应用到很多页面的时候,外部样式表将是理想的选择.使用外部样式表,你就可以通过更改一个文件来改变整个 ...
- CorelDRAW 2019线上发布会报名已开始
近日,由苏州思杰马克丁软件公司独家代理的CorelDRAW 2019将在苏州开启一场设计上的饕餮盛宴,您报名了么? 不管您是专业的设计师还是热爱设计的狂热粉丝,都将有机会参与到我们的活动中,为了这场盛 ...
- POI操作Excel的三种Workbook的发展和区别
POI的一些使用方法: 创建流程:(上级为下级的载体) 1.创建Workbook(工作薄): 2.创建Sheet(表单,可以创建多个): 3.创建Row(行): 4.创建Cell(单元格) 接下来分别 ...
- bzoj 1121: [POI2008]激光发射器SZK 思维_结论
Description 多边形相邻边垂直,边长为整数,边平行坐标轴.要在多边形的点上放一些激光发射器和接收器.满足下列要求: 1发射器和接收器不能放置在同一点: 2发射器发出激光可以沿壁反射,最终到达 ...
- NOIP2016 天天爱跑步 线段树合并_桶_思维题
竟然独自想出来了,好开心 Code: #include<bits/stdc++.h> #define setIO(s) freopen(s".in","r&q ...
- codevs 2800 送外卖 floyd + Tsp
简单的状压动归 #include<cstdio> #include<algorithm> using namespace std; const int N=17; const ...