js判断文件类型大小并给出提示
上传文件是工作中常用的功能,不同的场景对不同的文件类型和文件大小都有不同的要求:
- <form id="uploadForm" method="post" class="layui-form">
- <div class="layui-form-item">
- <label class="layui-form-label">名称</label>
- <div class="layui-input-block">
- <input type="text" name="name" required lay-verify="required"
- placeholder="请输入文件名" autocomplete="off" class="layui-input">
- </div>
- </div>
- <div class="layui-form-item">
- <label class="layui-form-label">资料类型:</label>
- <div class="layui-input-block">
- <select name="datatypeid" id="datatypeid"></select>
- </div>
- <input type="hidden" id="yincang">
- </div>
- <div class="layui-form-item">
- <label class="layui-form-label">上传文件</label>
- <div class="layui-input-block">
- <input class="layui-input" type="file" name="file" onchange="fileChange(this);"/>
- </div>
- </div>
- <div class="layui-form-item">
- <div class="layui-input-block">
- <input type="button" class="layui-btn" value="上传"
- onclick="upload()" />
- </div>
- </div>
- </form>
js方法:
- <script type="text/javascript">
- var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
- function fileChange(target, id) {
- var fileSize = 0;
- var filetypes = [ ".doc", ".docx" ];//这里设置接受的文件类型
- var filepath = target.value;
- var filemaxsize = 1024 * 10;//接受的文件最大10M
- if (filepath) {
- var isnext = false;
- var fileend = filepath.substring(filepath.indexOf("."));
- 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>
js判断文件类型大小并给出提示的更多相关文章
- [转]客户端js判断文件类型和文件大小即限制上传大小
原文地址:https://www.jb51.net/article/43498.htm 需要脚本在客户端判断大小和文件类型,由于网上没有适合的,就自己写了一个并测试 文件上传大小限制的一个例子,在此与 ...
- 客户端js判断文件类型和文件大小即限制上传大小
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- Linux中用st_mode判断文件类型
Linux中用st_mode判断文件类型 2012-12-11 12:41 14214人阅读 评论(4) 收藏 举报 分类: Linux(8) C/C++(20) 版权声明:本文为博主原创文章, ...
- Python之基于十六进制判断文件类型
核心代码: #!/usr/bin/env python # -*- coding: utf-8 -*- # @Author : suk import struct from io import Byt ...
- JavaScript根据文件名判断文件类型
//JavaScript根据文件名判断文件类型 var imgExt = new Array(".png",".jpg",".jpeg",& ...
- js判断浏览器类型 js判断ie6不执行
js判断浏览器类型 $.browser 对象 $.browser.version 浏览器版本 var binfo = ''; if ($.browser.msie) { binfo = " ...
- PHP取二进制文件头快速判断文件类型
<?php /*文件扩展名说明 *7173 gif *255216 jpg *13780 png *6677 bmp *239187 txt,aspx,asp,sql *208207 xls.d ...
- 通过JS判断联网类型和连接状态
通过JS判断联网类型和连接状态 中国的移动网络环境复杂,为了给用户带去更好访问体验,开发者希望能了解用户当前的联网方式,然后给用户一个符合当前网络环境的请求结果. W3C的规范中给出了一个方法来获得现 ...
- 用java流方式判断文件类型
这个方法只能在有限的范围内有效.并不是万金油 比如 图片类型判断,音频文件格式判断,视频文件格式判断等这种肯定是2进制且专业性很强的文件类型判断. 下面给出完整版代码 首先是文件类型枚取 packag ...
随机推荐
- python3学习笔记(3)
一.内置函数补充1.callable()检测传递的参数是否可以被调用.def f1() pass可以被调用f2 = 123不可以被调用2.chr()和ord()chr()将ascii码转换成字符,or ...
- SpringCloud接入EDAS——服务发现篇
旁白 很久没有写技术文章了,最近不是写水文就是写小说.说到底,还是最近很少研究技术的缘故,已经到了江郎才尽的地步了. 不过,LZ无意间看到自己团队的小伙伴写的一些文章,觉得还是不错的,于是便动了心思, ...
- 但未在用户代码中进行处理 具有固定名称“Oracle.ManagedDataAccess.Client”的 ADO.NET 提供程序未在计算机或应用程序配置文件中注册或无法加载。
这是使用ODP.NET链接Orcl数据库常见错误,需要配置系统环境变量. 解决方法如下: 找到以下路径文件:C:\Windows\Microsoft.NET\Framework\v4.0.30319\ ...
- ExceptionLess 本地部署小结
ExceptionLess 是一个免费开源分布式系统日志收集框架,地址:https://github.com/exceptionless/Exceptionless 运行环境: .NET 4.6.1 ...
- c# winform treelistview的使用(treegridview)
TreeView控件显示的内容比较单一,如果需要呈现更详细信息TreeListView是一个不错的选择. 先看效果: 首先需要引用文件System.Windows.Forms.TreeListView ...
- SpringCloud学习笔记(1)——Eureka
Spring Cloud Spring Cloud为开发者快速构建通用的分布式系统(例如:配置管理.服务发现.断路器.智能路由.微代理.控制总线.一次性的Token.全局锁.领导者选举.分布式会话.集 ...
- 理解defineProperty以及getter、setter
我们常听说vue是用getter与setter实现数据监控的,那么getter与setter到底是什么东西,它与defineProperty是什么关系,平时有哪些用处呢?本文将为大家一一道来. 对象的 ...
- 对jQuery源码的一点感悟
1. 链式写法 这是jQuery语法上的最大特色,也许该改改POJO里的set方法,和其他的非get方法什么的,可以把多行代码合并,减去每次敲打对象变量的麻烦 2. 动态参数 偶尔使用Java的动 ...
- C#爬虫系列(二)——食品安全国家标准数据检索平台
上篇对“国家标准全文公开系统”的国标进行抓取,本篇对食品领域的标准公开系统“食品安全国家标准数据检索平台”进行抓取. 平台地址:http://bz.cfsa.net.cn/db 一.标准列表 第一步还 ...
- ThinkPHP 5 中AJAX跨域请求头设置方法
最近用thinkphp做项目,在测试环境时,存在接口的测试问题.在tp官网也没能找到相关的解决方法.自已看了一下源码,有如下的解决方案. 在项目目录下面,创建common/behavior/CronR ...