Angularjsファイルのインポート時に指定したフォーマットのみ表示
4003 ワード
html 5の新しいプロパティacceptを使用すると、特定のファイルタイプのみを表示できます.次に、excelフォーマットを例にインポートしました.html:
js:
以下はファイル対応のフォーマットである:拡張子———————MIME———————記述*.3 gpp———audio/3 gpp,video/3 gpp———3 GPP 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 Value*.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————アプリケーション/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
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———————記述*.3 gpp———audio/3 gpp,video/3 gpp———3 GPP 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 Value*.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————アプリケーション/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