File API
14092 ワード
紹介する
安全のため、ブラウザはファイルのみを読み込むことができます.
デフォルトでは、<input type="file" />でファイルが受信されます.
1.ファイルとFileList
<input type="file" multiple class="input-files" />
<script>
document.querySelector(".input-files").addEventListener("change", e => {
console.log(e.target.files); // FileList를 반환한다.
// FileList는 유사배열이며, 각 인덱스마다 File객체를 가지고 있다
// File객체에는 사용자가 input으로부터 넣은 파일에 대한 정보를 가지고 있다.
});
</script>
2. FileReader
Fileは、指定された形式でオブジェクトを読み込むために使用されます.
<input type="file" multiple class="input-files" />
<script>
document.querySelector(".input-files").addEventListener("change", e => {
console.log(e.target.files); // FileList를 반환한다.
// FileList는 유사배열이며, 각 인덱스마다 File객체를 가지고 있다
// File객체에는 사용자가 input으로부터 넣은 파일에 대한 정보를 가지고 있다.
});
</script>readAsText:純テキストで読み取る(.txt)readAsDataURL:base 64に符号化...画像処理(.jpg)readAsArrayBuffer:ArrayBuffer戻りオブジェクト(.mp4)readAsBinaryString:バイナリ読み出し2.1例readAsText(テキストファイルを読み込む)
<body>
<input type="file" accept="*/*" class="input-text-file" />
<textarea class="t-a" cols="30" rows="10"></textarea>
<div class="preview" />
<script>
document.querySelector(".input-text-file").addEventListener("change", e => {
// 파일리더생성
const textFileReader = new FileReader();
// 파일처리를 성공했을 때 실행할 이벤트 등록
textFileReader.onload = (event) => {
document.querySelector(".t-a").innerHTML = event.target.result;
}
// 파일을 텍스트형태로 읽음
// e.target.files는 FileList로 input으로 받은 파일은 File이 들어가 있음
textFileReader.readAsText(e.target.files[0]);
});
</script>
</body>2.2 readAsData URL例（画像ファイルの読み込み）
<body>
<input type="file" accept="image/*" class="input-image-file" />
<div class="preview" />
<script>
document.querySelector(".input-image-file").addEventListener("change", e => {
// 파일리더생성
const textFileReader = new FileReader();
// 파일처리를 성공했을 때 실행할 이벤트 등록
textFileReader.onload = (event) => {
document.querySelector(".preview").style = `background-image: url("${event.target.result}")`;
console.log(event.target.result);
console.log(event);
}
// 파일을 base64형태로
textFileReader.readAsDataURL(e.target.files[0]);
});
</script>
</body>リファレンスサイト
Reference
この問題について(File API), 我々は、より多くの情報をここで見つけました https://velog.io/@1-blue/File-APIテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol