js判断文件类型大小并给出提示的实现方法


Posted in Javascript onJanuary 03, 2018

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

<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判断文件类型大小并给出提示的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 浮动导航栏实现代码
Aug 27 Javascript
基于Jquery与WebMethod投票功能实现代码
Jan 19 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
Oct 11 Javascript
js对图片base64编码字符串进行解码并输出图像示例
Mar 17 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
May 05 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
May 18 Javascript
浅谈js中字符和数组一些基本算法题
Aug 15 Javascript
bootstrap实现每隔5秒自动轮播效果
Dec 20 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
Nov 22 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
May 08 Javascript
node中的session的具体使用
Sep 14 Javascript
浅谈vue中$bus的使用和涉及到的问题
Jul 28 Javascript
js登录滑动验证的实现(不滑动无法登陆)
Jan 03 #Javascript
Angular实现下拉框模糊查询功能示例
Jan 03 #Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
Jan 03 #Javascript
angularjs实现分页和搜索功能
Jan 03 #Javascript
vue引入ueditor及node后台配置详解
Jan 03 #Javascript
Node.js搭建小程序后台服务
Jan 03 #Javascript
基于js文件加载优化(详解)
Jan 03 #Javascript
You might like
让你的PHP同时支持GIF、png、JPEG
2006/10/09 PHP
php 之 没有mysql支持时的替代方案
2006/10/09 PHP
PHP学习之数组值的操作
2011/04/17 PHP
ThinkPHP文件上传实例教程
2014/08/22 PHP
PHP实现的微信APP支付功能示例【基于TP5框架】
2019/09/16 PHP
Firefox 无法获取cssRules 的解决办法
2006/10/11 Javascript
禁止JQuery中的load方法装载IE缓存中文件的方法
2009/09/11 Javascript
jquery CSS选择器笔记
2010/03/29 Javascript
一个js的tab切换效果代码[代码分离]
2010/04/11 Javascript
jquery中实现简单的tabs插件功能的代码
2011/03/02 Javascript
js网页中的(运行代码)功能实现思路
2013/02/04 Javascript
非常漂亮的JS+CSS图片幻灯切换特效
2013/11/20 Javascript
jQuery中queue()方法用法实例
2014/12/29 Javascript
jQuery处理图片加载失败的常用方法
2015/06/08 Javascript
js方法数据验证的简单实例
2016/09/17 Javascript
实例解析angularjs的filter过滤器
2016/12/14 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
2017/03/02 Javascript
详解js几个绕不开的事件兼容写法
2017/08/30 Javascript
vue实现简单跑马灯效果
2020/05/25 Javascript
Python中字典的基本知识初步介绍
2015/05/21 Python
Python实现简单截取中文字符串的方法
2015/06/15 Python
Python脚本简单实现打开默认浏览器登录人人和打开QQ的方法
2016/04/12 Python
Django中Forms的使用代码解析
2018/02/10 Python
完美解决Python 2.7不能正常使用pip install的问题
2018/06/12 Python
python list转矩阵的实例讲解
2018/08/04 Python
使用python根据端口号关闭进程的方法
2018/11/06 Python
详解Python中的内建函数,可迭代对象,迭代器
2019/04/29 Python
Python中求对数方法总结
2020/03/10 Python
Python在centos7.6上安装python3.9的详细教程(默认python版本为2.7.5)
2020/10/15 Python
C语言50道问题
2014/10/23 面试题
幼儿园教学工作总结2015
2015/05/12 职场文书
运动会宣传语
2015/07/13 职场文书
车辆安全隐患排查制度
2015/08/05 职场文书
酒店工程部的岗位职责汇总大全
2019/10/23 职场文书
解决Navicat for Mysql连接报错1251的问题(连接失败)
2021/05/27 MySQL
Netty客户端接入流程NioSocketChannel创建解析
2022/03/25 Java/Android