JS常用工具函数-限制文件选择类型和大小

妖狐艹你老母 2022-05-15 12:14 255阅读 0赞

<input type="file" onchange="checkFile(this)">

function checkFile(target) {
      var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
      var fileSize = 0;
      var filetypes =[".jpg",".png",".rar",".txt",".zip",".doc",".ppt",".xls",".pdf"]; // 自定义文件类型
      var filepath = target.value;
      var filemaxsize = 1024*2; //自定义文件大小
      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;
      }
    }

如果需要匹配的文件类型是图片，在chrome浏览器不建议直接在标签中写 accept="images/\*" 因为通配符过滤会卡(可能是webkit内核底层问题，在IE和Firefox中没有发现卡顿问题)！

发表评论取消回复

表情：

评论列表（有 0 条评论，255人围观）

还没有评论，来说两句吧...

相关阅读

相关 js 常用技术和工具

堡垒机：齐治运维管理和jumpserver 切图/ps:pxcook chrome插件：FEHelp GoogleHelper 移动端调试：vConsole

╰半夏微凉°/ 2023年02月18日 09:46/ 0 赞/ 11 阅读

相关 js常用工具函数总结

/ 目录：（1）序列化时间 / 获取当前序列化后的时间 dateFormat （2）获取当前日期前或指定时间，前一定

￡神魔★判官ぃ/ 2022年11月03日 04:05/ 0 赞/ 238 阅读

相关 JavaScript实现限制文件上传类型和大小

JavaScript实现限制文件上传类型和大小 <title>文件上传前台控制检测程序 v0.6</title> <style> body

ゝ一纸荒年。/ 2022年09月12日 04:48/ 0 赞/ 291 阅读

相关 oracle数据类型大小限制

<table style="border-collapse:collapse;border-spacing:0px 0px;margin-bottom:24px;table-l

￡神魔★判官ぃ/ 2022年05月25日 12:22/ 0 赞/ 266 阅读

相关 JS常用工具函数-限制文件选择类型和大小

<input type="file" onchange="checkFile(this)"> function checkFile(target) {

妖狐艹你老母/ 2022年05月15日 12:14/ 0 赞/ 256 阅读

相关 JS常用工具函数-节流和防抖

节流和防抖是属于面试和日常开发过程中常见的问题函数防抖(debounce) 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。用户在不断输入值时，用防

雨点打透心脏的1/2处/ 2022年05月15日 12:13/ 0 赞/ 152 阅读

相关 JS常用工具函数-倒计时

倒计时是业务中常见需求，写一下固定时间倒计时和指定结束时间倒计时 <!DOCTYPE html> <html> <head> <meta

Bertha 。/ 2022年05月15日 07:05/ 0 赞/ 286 阅读

相关 JS常用工具函数

1、isStatic：检测数据是不是除了symbol外的原始数据 function isStatic(value) { return(

旧城等待，/ 2021年12月19日 02:35/ 0 赞/ 384 阅读

相关 JS开发常用工具函数

> 作者：hfhan [https://segmentfault.com/a/1190000019601333][https_segmentfault.com_a_119000

电玩女神/ 2021年09月30日 03:46/ 0 赞/ 450 阅读

相关 js 限制 input 文件上传的大小和格式

最近在项目中需要一些文件大小和格式的校验，整理了一下作为日后的参考废话不多说，上代码： Javascript: //验证上传文件大小和类型

梦里梦外;/ 2021年06月26日 16:06/ 0 赞/ 756 阅读