前端限制上传文件的类型
时间:2022-05-04
本文章向大家介绍前端限制上传文件的类型,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
今天在工作中遇到一个需求,需要在上传文件的时候限制上传文件的类型,比如上传图片的就只能上传图片类型的文件。 现将自己在开发中的代码放到我的博客里,以备在以后的开发中再次遇到。就可以直接使用了。
这里就放一个小demo了。代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="file" name="contractFileName" style="width: 500px;" onchange="fileChange(this);"/>
<script type="text/javascript">
var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
function fileChange(target,id) {
var fileSize = 0;
var filetypes =[".jpg",".png",".rar",".txt",".zip",".doc",".ppt",".xls",".pdf",".docx",".xlsx"];
var filepath = target.value;
var filemaxsize = 1024*2;//2M
if(filepath){
var isnext = false;
var fileend = filepath.substring(filepath.lastIndexOf("."));
if(filetypes && filetypes.length>0){
for(var i =0; i<filetypes.length;i++){
if(filetypes[i]==fileend){
isnext = true;
break;
}
}
}
if(!isnext){
alert("不接受此文件类型!");
target.value ="";
return false;
}
}else{
return false;
}
if (isIE && !target.files) {
var filePath = target.value;
var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
if(!fileSystem.FileExists(filePath)){
alert("附件不存在,请重新输入!");
return false;
}
var file = fileSystem.GetFile (filePath);
fileSize = file.Size;
} else {
fileSize = target.files[0].size;
}
var size = fileSize / 1024;
if(size>filemaxsize){
alert("附件大小不能大于"+filemaxsize/1024+"M!");
target.value ="";
return false;
}
if(size<=0){
alert("附件大小不能为0M!");
target.value ="";
return false;
}
}
</script>
</body>
</html>
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 0791-5.13.1-Hive视图执行show create table被截断异常分析
- SpringBoot系列之IDEA项目中设置热部署教程
- [教程] 创建第一条 Substrate 链
- SpringBoot系列之actuator监控管理极速入门与实践
- 如何查看JVM运行的堆内存情况
- axios不支持finally的解决办法
- 【机器学习基础】关于Scikit-Learn,你不一定知道的10件事
- Java高级技术梳理
- IDEA使用指北
- 工作记录二: 记录一次简单的SQL优化过程
- Elastic Search
- [数据结构与算法] 图结构
- [数据结构与算法]赫夫曼树与赫夫曼编码
- [数据结构与算法] 查找算法
- Kafka——分布式的消息队列