Angularjs导入文件时只显示指定的格式

最新推荐文章于 2025-07-15 13:07:25 发布

原创最新推荐文章于 2025-07-15 13:07:25 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #angularjs #上传文件

前端开发专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何使用HTML5中的accept属性限制文件上传类型，并提供了一个导入Excel文件的例子。通过设置accept属性，开发者能确保用户仅能选择指定类型的文件进行上传。

利用html5新属性accept可以只显示特定的文件类型，下面我们已导入excel格式为例：
html：

<input type="file" accept="文件格式" onchange=angular.element(this).scope().selectFile(this)/>

js:

$scope.selectFile = function (el) {
      var files = el.files;
      if (files.length > 0) {
          var file = files[0];
          var fd = new FormData();
          fd.append('file', file);
          //把数据发送给后台成功后再赋值
          后台接口.then(function (datas) {
              vmManager.dataSets = datas;
          });
      }
};

下面是文件对应的格式：
扩展名 —————- MIME———————– 描述
*.3gpp———audio/3gpp, video/3gpp ———-3GPP Audio/Video
*.ac3———–audio/ac3 AC3 Audio
*.asf ———–allpication/vnd.ms-asf Advanced———- Streaming Format
*.au ————audio/basic AU——– Audio
*.css———– text/css———- Cascading Style Sheets
*.csv————- text/csv (accept直接写.csv) —–Comma Separated Values
*.doc————- application/msword—— MS Word Document
*.dot ————application/msword——– MS Word Template
*.dtd———— application/xml-dtd——— Document Type Definition
*.dwg ———–image/vnd.dwg——- AutoCAD Drawing Database
*.dxf———— image/vnd.dxf——— AutoCAD Drawing Interchange Format
*.gif———- image/gif———– Graphic Interchange Format
*.htm————- text/html———– HyperText Markup Language
*.html ———–text/html—– HyperText Markup Language
*.jp2 ———–image/jp2——– JPEG-2000
*.jpe ———image/jpeg———– JPEG
*.jpeg———- image/jpeg———– JPEG
*.jpg———— image/jpeg ———-JPEG
*.js ————-text/javascript, application/javascript ——–JavaScript
*.json————– application/json ————JavaScript Object Notation
*.mp2———– , video/mpeg MPEG Audio/Video Stream,— Layer II
*.mp3——– MPEG Audio Stream,—— Layer III
*.mp4———- audio/mp4, video/mp4 MPEG-4 Audio/Video
*.mpeg———– video/mpeg—— MPEG Video Stream, Layer II
*.mpg ————-video/mpeg——– MPEG Video Stream, Layer II
*.mpp———— application/vnd.ms-project —–MS Project Project
*.ogg———– application/ogg, audio/ogg——- Ogg Vorbis
*.pdf ————application/pdf (accept直接写.pdf) ———Portable Document Format
*.png———— image/png Portable ———Network Graphics
*.pot————- application/vnd.ms-powerpoint—— MS PowerPoint Template
*.pps ————application/vnd.ms-powerpoint ———MS PowerPoint Slideshow
*.ppt———— application/vnd.ms-powerpoint ——–MS PowerPoint Presentation
*.rtf————– application/rtf, text/rtf Rich ——Text Format
*.svf ————–image/vnd.svf Simple Vector——— Format
*.tif————- image/tiff Tagged Image ———Format File
*.tiff————- image/tiff Tagged Image———– Format File
*.txt———— text/plain ———Plain Text
*.wdb————- application/vnd.ms-works——— MS Works Database
*.wps————– application/vnd.ms-works ——–Works Text Document
*.xhtml———– application/xhtml+xml Extensible ——–HyperText Markup Language
*.xlc ——–application/vnd.ms-excel——– MS Excel Chart
*.xlm———– application/vnd.ms-excel ——–MS Excel Macro
*.xls ————-application/vnd.ms-excel ——–MS Excel Spreadsheet
*.xlsx——— application/vnd.openxmlformats-officedocument.spreadsheetml.sheet——– MS Excel Spreadsheet 2007-2010
*.xlt ———–application/vnd.ms-excel ——–MS Excel Template
*.xlw————- application/vnd.ms-excel ——–MS Excel Workspace
*.xml ————-text/xml, application/xml——– Extensible Markup Language
*.zip aplication/zip Compressed ——–Archive