Javascript 过滤文件类型的扩展名，上传图片

javascript 图片上传扩展名发布于 2020-10-16

一个网站，由文字、图片、视频和音频等文件组成。放开网站的权限，充许用户上传文件，让用户参与进网站中的建设; 用户获得满足度，网站获得用户粘度; 逐步形成良性的社交网站，达到互利到助，实现共赢。

原则上来讲，并不是每个用户都是「合格」的参与者，他们需要网站的指引操作。

在开放权限的前提下，考虑网站安全因素，文件存储空间因素，在权限下又限制部份功能。如比，最常上传的文件：图片文件。

限制的图片文件

限制文件类型：.jpg,.png,.jpeg
限制图片大小：2M

获取图片扩展名函数

JS var getExt = function (name) {
    var name = name.toLowerCase(); //扩展名小写
    var position = name.lastIndexOf('.');
    if(position == -1) {
        return '';
    }

    return name.substr(position);
 }

充许图片扩展名函数

JS var isAllowExt = function (ext) {
   if(ext == '') {
      return false;
   }

   var data = ['.jpg','.png','.jpeg'];
   for(var i in data) {
      if(data[i] == ext) {
          return true
     }
  }
  return false;
}

通过event.target.files数组下的文件信息，获取文件称全称，进而获取文件类型的扩展名，限制文件上传。

HTML<input type="file"  value="" onchange="iUpload.upload(event)" accept=".jpg,.png,.jpeg" >

JS var upload = function (event) {
    var files = event.target.files;
    if (files.length == 0) {
        return false;
    }
    var file = files[0];
    console.log('file',file);
    var ext = getExt(file.name);

    if(!isAllowExt(ext) ){
        console.log('仅支持图片文件上传');
        $(options.uploadBtn).val('');
        return false;
    }

    if(file.size > 2*1024*1024 ) {
        console.log('图片不能大于2M');
        $(options.uploadBtn).val('');
        return false;
    }

    console.log('success');
   //do something
}