网站首页 > 技术文章 正文
前端web上传文件时,需要在上传之前判断一下文件的类型以及文件的大小,HTML为前端的标记语言是无法做到这一点,只能使用javascript 动态脚本代码来实现。
js获取上传文件大小的方法
示例代码:
<!--表单数据-->
<form name="form1" id="form1">
<input type="file" id="btn_file" name="file"></input>
<input type="button" id="btn" value="提交">
</form>
<script>
var btn=document.querySelector("#btn");
btn.onclick=function(){
var file = document.getElementById('btn_file').files[0];
// 打印文件的大小,文件大小的单位为字节(B)
console.log(file.size);
//判断文件是否过大
// 下面判断文件是否超过 1m 大小 1M的大小划算为:1024 * 1024 = 1048576
if(file.size > 1048576){
alert('文件超过 1M 大小,不允许上传!');
return false;
}
}
</script>
js获取上传文件类型的方法
示例代码:
<!--表单数据-->
<form name="form1" id="form1">
<input type="file" id="btn_file" name="file"></input>
<input type="button" id="btn" value="提交">
</form>
<script>
var btn=document.querySelector("#btn");
btn.onclick=function(){
var file = document.getElementById('btn_file').files[0];
//定义可上传文件的类型
var file_ypes =[".jpg",".png",".rar",".txt",".zip",".doc",".ppt",".xls",".pdf",".docx",".xlsx"];
//获取文件的后缀名
var type = file.name.substring(file.name.indexOf("."));
//判断上传的文件是否可上传
if(file_ypes.indexOf(type) != -1){
console.log('可以上传');
}else{
console.log('禁止上传');
}
}
</script>
猜你喜欢
- 2025-06-15 Nodejs文件上传、监听上传进度(node监听文件变化)
- 2025-06-15 Express 文件上传不迷路:req.files 一次性讲明白
- 2025-06-15 JAVA大文件上传,大文件下载解决方案
- 2025-06-15 深入掌握 OSS:最完美的 OSS 上传方案!
- 2025-06-15 AspNetCore中的文件上传与下载优化
- 2025-06-15 【前后台完整版】大文件分片上传(大文件分片上传速度快么)
- 2024-10-04 JAVAWEB 文件上传及下载 java文件的上传和下载
- 2024-10-04 用JAVA实现大文件上传及显示进度信息
- 2024-10-04 常用JSP文件上传,下载的一些方法 常用jsp文件上传,下载的一些方法叫什么
- 2024-10-04 如何实现大文件上传、断点续传、切片上传
你 发表评论:
欢迎- 最近发表
-
- Python常用标准库(pickle序列化和JSON序列化)
- Linux json-c使用_linux解析json数据
- 源码推荐(03.04):微信支付的测试,Json数据解析
- 打开JSON文件的六种方法,总有一种适合你
- springmvc项目中接收Android提交json数据
- 一篇文章让你详细了解何为JSON_json到底是什么
- FlinkSQL处理复杂JSON的思路_flinksql解析json数组
- 超级好用的轻量级JSON处理命令jq_json使用教程
- .NET性能系列文章二:Newtonsoft.Json vs System.Text.Json
- 推荐几个开发必备的JSON工具_推荐几个开发必备的json工具
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端路由 (61)
- 前端数组 (73)
- 前端js面试题 (50)
- 前端定时器 (59)
- Oracle RAC (76)
- oracle恢复 (77)
- oracle 删除表 (52)
- oracle 用户名 (80)
- oracle 工具 (55)
- oracle 内存 (55)
- oracle 导出表 (62)
- oracle约束 (54)
- oracle 中文 (51)
- oracle链接 (54)
- oracle的函数 (58)
- oracle面试 (55)
- 前端调试 (52)
本文暂时没有评论,来添加一个吧(●'◡'●)