首页/ 填坑/ 文章详情

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
}

file对象变量讲解

lastModified:最后文件修改时间戳
lastModifiedDate:最后文件修改时间
name:文件名,包括文件扩展名
size:文件大小,单位B
type:文件类型,比如:image/jpg

input 属性字段accept可以初步限制上传文件扩展类型,快速过滤不符合的文件扩展类型。不过用户可以自由选择全部扩展类型,因此代码上还需要继续限制文件扩展类型

看到这里时, file 对象里有 type 时,我们是否使用 type 过滤扩展类型?是的,课后作业就留给你们了。

文章评论1 records

最新 最早
HentaiCat
(ಡωಡ)很实用,直接拿走...
来自Chrome Windows 7 2020-11-02 15:28 回复
HentaiCat

0

最新评论Latest comments

HentaiCatHentaiCat 2020-12-30 10:22
考科目二全程很紧张,考了三次才过,有次侧方入库直接pass,100分扣完,呜呜呜~
猫猫酱猫猫酱 2020-11-12 10:56
一入多肉深似海,说多都是泪
soulkunsoulkun 2020-11-05 15:54
IconFont的图标真的很好用!!!
无限链霉球菌无限链霉球菌 2020-11-03 11:41
药店,了解一下(`・ω・´)
HentaiCatHentaiCat 2020-11-02 15:28
(ಡωಡ)很实用,直接拿走...