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

前端之家收集整理的这篇文章主要介绍了Angularjs导入文件时只显示指定的格式前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

利用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

猜你在找的Angularjs相关文章