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 keytool证书工具使用小结（转载）
原文地址:http://www.micmiu.com/lang/java/keytool-start-guide/ Keytool 是一个Java数据证书的管理工具 ,Keytool将密钥(key)和 ...
- socket 的通信过程
1.建立套接字 Linux在利用socket()系统调用建立新的套接字时,需要传递套接字的地址族标识符.套接字类型以及协议,其函数定义于net/socket.c中: asmlinkage long s ...
- nodeJs的一些常识知识
在项目目录中打开命令窗口 1. npm init 生成一个 package.json.(npm inii -y 直接生成,不用确定). 2.npm i . 下载 package.json devDep ...
- 【JavaScript框架封装】使用Prototype给Array，String，Function对象的方法扩充
/* * @Author: 我爱科技论坛* @Time: 20180705 * @Desc: 实现一个类似于JQuery功能的框架* V 1.0: 实现了基础框架.事件框架.CSS框架.属性框架.内容 ...
- Iterator和for...of
Iterator和for...of 什么是Iterator ES6中的Map 和 Set ,再加上之前的数组和对象,这样就有了四种数据集合,用户可以组合使用它们,定义自己的数据结构.这时,我们就需要一 ...
- MAVN（自动创建maven项目骨架） 项目架构的生成
1.Maven的项目架构生成 A.打开DOS命令窗口选定文件的更跟目录 B:输入命令 mvn archetype:generate C:根据提示输入对应的标识 如图: 最后提示 SUCCESS 即为 ...
- Linux Shell脚本编程-数组和字符串处理
数组 1.数组的定义及声明 变量:存储单个元素的内存空间 数组:存储多个元素的连续的内存空间,相当于多个变量的集合 数组名:整个数组只有一个名字 索引:编号从0开始,属于数值索引:bash的数组支持 ...
- Django入门--模板标签、继承与引用
一.模板标签 Django模板引擎提供的可以在模板中进行的各种逻辑操作,是函数调用的一种特殊形式,如循环.判断等功能,期语法规则为: {% tag %} content {% tag 参数1 参数2 ...
- 【codeforces 799B】T-shirt buying
[题目链接]:http://codeforces.com/contest/799/problem/B [题意] 告诉你每个人喜欢的衣服的颜色; 然后告诉你每件衣服的正面和背面的颜色以及它的价格; 只要 ...
- @Bean 指定初始化和销毁方法
bean 的生命周期 bean 的创建 --> 初始化 --> 销毁 ioc 容器管理 bean 的声明周期 可以自定义初始化和销毁方法 构造器( 对象创建 )被调用时机 单实例:在容器启 ...