- 追加された行はこの色です。
- 削除された行はこの色です。
[[Angular2]] >
* Angular2でFile APIを利用する [#lbf406e2]
#setlinebreak(on);
#contents
** HTML [#n674704e]
#myhtml2(){{
<input type="file" id="file1" (change)="onFileSelect($event)" >
<hr >
<h3>ファイル内容(確認用)</h3>
<div>
<img *ngIf="isImage" [src]="srcImage" />
<pre *ngIf="isText" style="border:1px solid #333;padding:5px;margin:0;" >{{srcText}}</pre>
<object *ngIf="isPdf" [data]="srcPdf" type="application/pdf"></object>
</div>
<br />
<h3>ファイル内容(Base64)</h3>
<div style="border:1px solid #333;padding:5px;word-wrap:break-word;word-break:break-all;">{{base64Text}}</div>
}}
** Component [#x61c3c9b]
#mycode2(){{
import { Component, OnInit } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Component({
selector: 'app-select-file',
templateUrl: './select-file.component.html',
styleUrls: ['./select-file.component.css']
})
export class SelectFileComponent implements OnInit {
// ファイルの内容
base64Text = '';
// 選択されたファイルの種類(デバッグ用)
isImage = false;
isText = false;
isPdf = false;
// ファイルの内容(デバッグ用)
srcImage = '';
srcText = '';
srcPdf: any = '';
constructor(private sanitizer: DomSanitizer) {
}
/**
* 初期処理.
*/
ngOnInit() {
}
/**
* ファイル選択時.
* (ElementRef を使用してもFile要素にアクセスは可能だが、
* ファイル選択時にイベント参照してデータ取得しておく方が手間は少なそう)
* ※Base64エンコードデータへの変換中は Loading? 中に しておく等の工夫は必要かも。
*/
onFileSelect($event) {
this.base64Text = '';
this.srcImage = '';
this.srcText = '';
this.srcPdf = '';
this.isImage = false;
this.isText = false;
this.isPdf = false;
if ($event.target.files && $event.target.files.length > 0) {
console.log($event.target.files[0]);
// コンポーネント参照をthis以外で出来るようにしておく
const pageObj = this;
const file = $event.target.files[0];
const fr = new FileReader();
fr.onload = function(evt: any) {
const base64Url = evt.target.result;
pageObj.base64Text = base64Url.replace(/^.+,/, '');
if (base64Url.match(/^data:text\/.+/)) {
// const plainText = atob(pageObj.base64Text);
const plainText = pageObj.b64DecodeUnicode(pageObj.base64Text);
pageObj.srcText = plainText;
pageObj.isText = true;
console.log('--- text ---');
console.log(plainText);
} else if (base64Url.match(/^data:image\/.+/)) {
console.log('--- image ---');
pageObj.srcImage = base64Url;
pageObj.isImage = true;
} else if (base64Url.match(/^data:application\/pdf/)) {
pageObj.srcPdf = pageObj.sanitizer.bypassSecurityTrustResourceUrl(base64Url);
pageObj.isPdf = true;
}
};
fr.readAsDataURL(file);
} else {
console.log('not selected!');
}
}
/**
* Base64デコード
* https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding#The_.22Unicode_Problem.22
*/
b64DecodeUnicode(str) {
// return atob(str);
return decodeURIComponent(atob(str).split('').map(function(c) {
return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
}).join(''));
}
}
}}