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 相关文章推荐
Javascript 篱式条件判断
Aug 22 Javascript
JavaScript 学习笔记 Black.Caffeine 09.11.28
Nov 30 Javascript
关于COOKIE个数与大小的问题
Jan 17 Javascript
javascript时区函数介绍
Sep 14 Javascript
JavaScript如何从listbox里同时删除多个项目
Oct 12 Javascript
JS的document.all函数使用示例
Dec 30 Javascript
Javascript实现单张图片浏览
Dec 18 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
Sep 14 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
May 31 Javascript
JavaScript获取服务器端时间的方法
Nov 29 Javascript
WEB开发之注册页面验证码倒计时代码的实现
Dec 15 Javascript
dropload.js插件下拉刷新和上拉加载使用详解
Oct 20 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中redis的用法深入解析
2014/02/20 PHP
百度实时推送api接口应用示例
2014/10/21 PHP
双冒号 ::在PHP中的使用情况
2015/11/05 PHP
php中的常用魔术方法汇总
2016/02/14 PHP
PHP全局变量与超级全局变量区别分析
2016/04/01 PHP
Yii2 RESTful中api的使用及开发实例详解
2016/07/06 PHP
微信封装的调用微信签名包的类库
2017/06/08 PHP
php表单处理操作
2017/11/16 PHP
js form 验证函数 当前比较流行的错误提示
2009/06/23 Javascript
JavaScript Event学习第六章 事件的访问
2010/02/07 Javascript
基于jquery实现状态限定编辑的代码
2012/02/11 Javascript
用RadioButten或CheckBox实现div的显示与隐藏
2013/09/21 Javascript
js截取中英文字符串、标点符号无乱码示例解读
2014/04/17 Javascript
详解Bootstrap创建表单的三种格式(一)
2016/01/04 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
2016/02/26 Javascript
AngularJs html compiler详解及示例代码
2016/09/01 Javascript
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
2017/09/12 jQuery
Angular网络请求的封装方法
2018/05/22 Javascript
详解创建自定义的Angular Schematics
2018/06/06 Javascript
vue使用高德地图根据坐标定位点的实现代码
2019/08/22 Javascript
详解微信小程序工程化探索之webpack实战
2020/04/20 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
2020/12/10 Vue.js
Python随机生成数据后插入到PostgreSQL
2016/07/28 Python
python中类和实例如何绑定属性与方法示例详解
2017/08/18 Python
Python基于动态规划算法解决01背包问题实例
2017/12/06 Python
Python 反转字符串(reverse)的方法小结
2018/02/20 Python
Pandas 同元素多列去重的实例
2018/07/03 Python
python实现关闭第三方窗口的方法
2019/06/28 Python
使用Python的networkx绘制精美网络图教程
2019/11/21 Python
Python的赋值、深拷贝与浅拷贝的区别详解
2020/02/12 Python
详解查看Python解释器路径的两种方式
2020/10/15 Python
Python从MySQL数据库中面抽取试题,生成试卷
2021/01/14 Python
Html5 webview元素定位工具的实现
2020/08/07 HTML / CSS
如何定义一个可复用的服务
2014/09/30 面试题
软件项目经理岗位职责
2015/04/01 职场文书
运动会运动员赞词
2015/07/22 职场文书