前端限制上传文件的类型
时间:2022-04-22
本文章向大家介绍前端限制上传文件的类型,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
今天在工作中遇到一个需求,需要在上传文件的时候限制上传文件的类型,比如上传图片的就只能上传图片类型的文件。 现将自己在开发中的代码放到我的博客里,以备在以后的开发中再次遇到。就可以直接使用了。
这里就放一个小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>
- Tensorflow生成模型收集: GANs与VAEs
- How to Install Nginx and PHP-FPM on FreeBSD 10
- 使用Apache MXNet分类交通标志图像
- CentOS 6.4 + nginx-1.2.5 + php-5.4.15 + MySQL-5.5.31
- 面试问题 - 只用位操作在ABAP里实现a+b
- JAVA 中异常处理的最佳实践
- webpack 4 升级指北
- 对抗蠕虫 —— 如何让按钮不被 JS 自动点击
- 让你的 git 拥有不同身份
- 购物网站的 redis 相关实现(Java)
- Chrome 常用插件 前端-后端-产品
- 更快更安全,HTTPS 优化总结
- Canvas 动画之支付宝价格拖动选择
- 使用 React 和 GraphQL 做一个todo list
- 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 数组属性和方法