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

  1.       <form id="uploadForm" method="post" class="layui-form">
  2. <div class="layui-form-item">
  3. <label class="layui-form-label">名称</label>
  4. <div class="layui-input-block">
  5. <input type="text" name="name" required lay-verify="required"
  6. placeholder="请输入文件名" autocomplete="off" class="layui-input">
  7. </div>
  8. </div>
  9.  
  10. <div class="layui-form-item">
  11. <label class="layui-form-label">资料类型:</label>
  12. <div class="layui-input-block">
  13. <select name="datatypeid" id="datatypeid"></select>
  14. </div>
  15. <input type="hidden" id="yincang">
  16. </div>
  17. <div class="layui-form-item">
  18. <label class="layui-form-label">上传文件</label>
  19.  
  20. <div class="layui-input-block">
  21. <input class="layui-input" type="file" name="file" onchange="fileChange(this);"/>
  22. </div>
  23. </div>
  24.  
  25. <div class="layui-form-item">
  26. <div class="layui-input-block">
  27.  
  28. <input type="button" class="layui-btn" value="上传"
  29. onclick="upload()" />
  30. </div>
  31. </div>
  32. </form>

js方法:

  1. <script type="text/javascript">
  2. var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
  3. function fileChange(target, id) {
  4. var fileSize = 0;
  5. var filetypes = [ ".doc", ".docx" ];//这里设置接受的文件类型
  6. var filepath = target.value;
  7. var filemaxsize = 1024 * 10;//接受的文件最大10M
  8. if (filepath) {
  9. var isnext = false;
  10. var fileend = filepath.substring(filepath.indexOf("."));
  11. if (filetypes && filetypes.length > 0) {
  12. for (var i = 0; i < filetypes.length; i++) {
  13. if (filetypes[i] == fileend) {
  14. isnext = true;
  15. break;
  16. }
  17. }
  18. }
  19. if (!isnext) {
  20. alert("不接受此文件类型!");
  21. target.value = "";
  22. return false;
  23. }
  24. } else {
  25. return false;
  26. }
  27. if (isIE && !target.files) {
  28. var filePath = target.value;
  29. var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
  30. if (!fileSystem.FileExists(filePath)) {
  31. alert("附件不存在,请重新输入!");
  32. return false;
  33. }
  34. var file = fileSystem.GetFile(filePath);
  35. fileSize = file.Size;
  36. } else {
  37. fileSize = target.files[0].size;
  38. }
  39.  
  40. var size = fileSize / 1024;
  41. if (size > filemaxsize) {
  42. alert("附件大小不能大于" + filemaxsize / 1024 + "M!");
  43. target.value = "";
  44. return false;
  45. }
  46. if (size <= 0) {
  47. alert("附件大小不能为0M!");
  48. target.value = "";
  49. return false;
  50. }
  51. }
  52. </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. python3学习笔记(3)

    一.内置函数补充1.callable()检测传递的参数是否可以被调用.def f1() pass可以被调用f2 = 123不可以被调用2.chr()和ord()chr()将ascii码转换成字符,or ...

  2. SpringCloud接入EDAS——服务发现篇

    旁白 很久没有写技术文章了,最近不是写水文就是写小说.说到底,还是最近很少研究技术的缘故,已经到了江郎才尽的地步了. 不过,LZ无意间看到自己团队的小伙伴写的一些文章,觉得还是不错的,于是便动了心思, ...

  3. 但未在用户代码中进行处理 具有固定名称“Oracle.ManagedDataAccess.Client”的 ADO.NET 提供程序未在计算机或应用程序配置文件中注册或无法加载。

    这是使用ODP.NET链接Orcl数据库常见错误,需要配置系统环境变量. 解决方法如下: 找到以下路径文件:C:\Windows\Microsoft.NET\Framework\v4.0.30319\ ...

  4. ExceptionLess 本地部署小结

    ExceptionLess 是一个免费开源分布式系统日志收集框架,地址:https://github.com/exceptionless/Exceptionless 运行环境: .NET 4.6.1 ...

  5. c# winform treelistview的使用(treegridview)

    TreeView控件显示的内容比较单一,如果需要呈现更详细信息TreeListView是一个不错的选择. 先看效果: 首先需要引用文件System.Windows.Forms.TreeListView ...

  6. SpringCloud学习笔记(1)——Eureka

    Spring Cloud Spring Cloud为开发者快速构建通用的分布式系统(例如:配置管理.服务发现.断路器.智能路由.微代理.控制总线.一次性的Token.全局锁.领导者选举.分布式会话.集 ...

  7. 理解defineProperty以及getter、setter

    我们常听说vue是用getter与setter实现数据监控的,那么getter与setter到底是什么东西,它与defineProperty是什么关系,平时有哪些用处呢?本文将为大家一一道来. 对象的 ...

  8. 对jQuery源码的一点感悟

    1.  链式写法 这是jQuery语法上的最大特色,也许该改改POJO里的set方法,和其他的非get方法什么的,可以把多行代码合并,减去每次敲打对象变量的麻烦 2.  动态参数 偶尔使用Java的动 ...

  9. C#爬虫系列(二)——食品安全国家标准数据检索平台

    上篇对“国家标准全文公开系统”的国标进行抓取,本篇对食品领域的标准公开系统“食品安全国家标准数据检索平台”进行抓取. 平台地址:http://bz.cfsa.net.cn/db 一.标准列表 第一步还 ...

  10. ThinkPHP 5 中AJAX跨域请求头设置方法

    最近用thinkphp做项目,在测试环境时,存在接口的测试问题.在tp官网也没能找到相关的解决方法.自已看了一下源码,有如下的解决方案. 在项目目录下面,创建common/behavior/CronR ...