上传文件是工作中常用的功能,不同的场景对不同的文件类型和文件大小都有不同的要求:

      <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判断文件类型大小并给出提示的更多相关文章

  1. [转]客户端js判断文件类型和文件大小即限制上传大小

    原文地址:https://www.jb51.net/article/43498.htm 需要脚本在客户端判断大小和文件类型,由于网上没有适合的,就自己写了一个并测试 文件上传大小限制的一个例子,在此与 ...

  2. 客户端js判断文件类型和文件大小即限制上传大小

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  3. Linux中用st_mode判断文件类型

    Linux中用st_mode判断文件类型 2012-12-11 12:41 14214人阅读 评论(4) 收藏 举报  分类: Linux(8)  C/C++(20)  版权声明:本文为博主原创文章, ...

  4. Python之基于十六进制判断文件类型

    核心代码: #!/usr/bin/env python # -*- coding: utf-8 -*- # @Author : suk import struct from io import Byt ...

  5. JavaScript根据文件名判断文件类型

    //JavaScript根据文件名判断文件类型 var imgExt = new Array(".png",".jpg",".jpeg",& ...

  6. js判断浏览器类型 js判断ie6不执行

    js判断浏览器类型 $.browser  对象 $.browser.version 浏览器版本 var binfo = ''; if ($.browser.msie) { binfo = " ...

  7. PHP取二进制文件头快速判断文件类型

    <?php /*文件扩展名说明 *7173 gif *255216 jpg *13780 png *6677 bmp *239187 txt,aspx,asp,sql *208207 xls.d ...

  8. 通过JS判断联网类型和连接状态

    通过JS判断联网类型和连接状态 中国的移动网络环境复杂,为了给用户带去更好访问体验,开发者希望能了解用户当前的联网方式,然后给用户一个符合当前网络环境的请求结果. W3C的规范中给出了一个方法来获得现 ...

  9. 用java流方式判断文件类型

    这个方法只能在有限的范围内有效.并不是万金油 比如 图片类型判断,音频文件格式判断,视频文件格式判断等这种肯定是2进制且专业性很强的文件类型判断. 下面给出完整版代码 首先是文件类型枚取 packag ...

随机推荐

  1. 软件测试博客日记Day02-11.16日 —— 赵天宇 —— 禅道的使用和配置

    禅道 1. 安装 1. 进入禅道的官方下载地址:http://www.zentao.net/download/80053.html 2. 下载禅道开源版本. 3. 正常安装,注意一定要放在根目录下. ...

  2. openvpn部署之快速入门实战+一键部署openvpn脚本

    个人原创禁止转载 软件环境: Centos6.9 x64 openvpn-2.4.3-1.el6.x86_64.rpm easy-rsa-2.2.2-1.el6.noarch.rpm    #推荐使用 ...

  3. 那些年我们写js烦的不疼不痒的错误

    1.Js 字符变量不加双/单引号. 列如:var strJsonInfo = '@Html.Raw(ViewBag.JsonInfo)'; 2.js 对象初始化器,最后一个属性值加逗号. 例如:var ...

  4. laravel whereDate()方法的使用

    今天在做日期查询,过过滤的时候,发现了一个问题,用where()语句,要求时间格式比较严格,比如你要查2017-09-23这一天的活动,你在输入框传入2017-09-23,系统会默认帮你补上后面缺少的 ...

  5. [Machine Learning]学习笔记-Neural Networks

    引子 对于一个特征数比较大的非线性分类问题,如果采用先前的回归算法,需要很多相关量和高阶量作为输入,算法的时间复杂度就会很大,还有可能会产生过拟合问题,如下图: 这时就可以选择采用神经网络算法. 神经 ...

  6. 编程语言的基础——搞定JavaIO

    关键字:IO基础,JUnit生命周期,字节流,字符流,字符编码,对象流,序列化,反序列化 Java I/O 流是一组有顺序的,有起点和终点的字节集合.是对设备文件间数据传输的总称和抽象. 在IO中涉及 ...

  7. expressjs 支持umeditor 的图片上传

    umedtor 的文件上传 是form 提交. 请求的header Accept: text/html,application/xhtml+xml,application/xml;q=0.9,imag ...

  8. 读取不标准的JSON数据

    正常的JSON数据 [      {"key":"UI","value":"UII"},      {"key ...

  9. 企业级分布式监控系统-Zabbix基础

    1.基础分部 1.1Zabbix简介 Zabbix 是一个企业级的分布式开源监控方案. 1.2监控系统架构 C/S架构 客户端/服务器端,这种架构适合规模较小,处于同一地域的环境 C/P/S 客户端/ ...

  10. KD-tree详解

    转载自:http://blog.csdn.NET/zhjchengfeng5/article/details/7855241 首先来一个问题: 给定平面上一个点集 E ,还有一个定点 V ,怎么在一群 ...