HTML5 학습 FileReader 인터페이스 코드 예시 공유 9(그림)
1. FileReader 개요
FileReader 개체를 사용하면 웹 애플리케이션이 사용자의 컴퓨터에 저장된 파일(또는 원시 데이터 버퍼)을 비동기적으로 읽을 수 있습니다. 읽을 파일이나 데이터를 지정하는 File 또는 Blob 개체입니다.
파일 개체는 사용자가 个<input> 요소에서 파일을 선택한 후 반환된 FileList 개체, 끌어서 놓기 작업으로 생성된 DataTransfer 개체 또는 HTMLCanvasElement일 수 있습니다. mozGetAsFile()方法后返回结果 요소에 의해 생성된 개체입니다. 🎜>에서
| 方法名 | 参数 | 描述 |
| readAsBinaryString | file | 将文件读取为二进制码 |
| readAsText | file,[encoding] | 将文件读取为文本 |
| readAsDataURL | file | 将文件读取为DataURL |
| readAsArrayBuffer | file | 将文件读取为ArrayBuffer对象 |
| abort | (none) | 中断读取操作 |
메서드 이름 |
매개변수 |
|
| readAsBinary문자열 | 파일 | 파일을 바이너리 코드로 읽기 |
| readAsText | 파일,[인코딩 ] | 파일을 텍스트로 읽기 |
| readAsDataURL | 파일 | DataURL로 파일 읽기 |
| readAsArrayBuffer | 파일 | 파일을 ArrayBuffer 객체로 읽기 |
| 중단 | (없음) | 인터럽트 읽기 작업 | tr>
| 事件 | 描述 |
| onabort | 数据读取中断时触发 |
| onerror | 数据读取出错时触发 |
| onloadstart | 数据读取开始时触发 |
| onprogress | 数据读取中 |
| onload | 数据读取成功完成时触发 |
| onloadend | 数据读取完成时触发，无论成功失败 |
3 , FileReader 인터페이스
이벤트이벤트 |
설명 |
| 중단 | 데이터 읽기가 중단되면 트리거됨 |
| onerror | 데이터 읽기 오류가 발생할 때 트리거됨 |
| onloadstart | 데이터 읽기가 시작될 때 트리거됨 |
| 진행 중 | 데이터 읽기 |
| onload | 데이터 읽기가 성공적으로 완료되면 트리거됨 |
| onloadend | 성공, 실패에 관계없이 데이터 읽기가 완료되면 트리거됨 |
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Html5Test</title>
</head>
<body>
<article>
<header></header>
<section>
<p>
<lable>请选择一个文件：</lable>
<input type="file" id="file_reader">
<input type="button" value="读取图像" onclick="readAsDataUrl();">
<input type="button" value="读取二进制数据" onclick="readAsBinaryString();">
<input type="button" value="读取文本文件" onclick="readAsText();">
</p>
<p id="file_reader_result" name="file_reader_result">
<!-- 这里用来显示读取结果 -->
</p>
<script>
var file_reader_result = document.getElementById("file_reader_result");
// 检测浏览器是否支持FileReader
if (typeof FileReader == "undefined") {
file_reader_result.innerHTML = "您的浏览器不支持FileReader";
file.setAttribute('disabled', 'disabled');
}
// 将文件以Data Url形式读入页面
function readAsDataUrl(){
// 检查是否为图像文件
var f = document.getElementById("file_reader").files[0];
if (!/image\/\w+/.test(f.type)) {
file_reader_result.innerHTML = "请上传图片文件！";
return false;
};
var reader = new FileReader();
// 将文件以Data Url形式读入页面
reader.readAsDataURL(f);
reader.onload = function(e){
file_reader_result.innerHTML = '<img src="' + this.result + '" alt="图片" />';
}
}
// 将文件以二进制形式读入页面
function readAsBinaryString(){
// 检查是否为图像文件
var f = document.getElementById("file_reader").files[0];
if (!/image\/\w+/.test(f.type)) {
file_reader_result.innerHTML = "请上传图片文件！";
return false;
};
var reader = new FileReader();
// 将文件以二进制形式读入页面
reader.readAsBinaryString(f);
reader.onload = function(e){
file_reader_result.innerHTML = this.result;
}
}
// 将文件以文本形式读入页面 目前测试仅支持txt文件
function readAsText(){
// 检查是否是文本文件
var f = document.getElementById("file_reader").files[0];
if (!/text\/\w+/.test(f.type)) {
file_reader_result.innerHTML = "请上传文本文件！";
return false;
};
var reader = new FileReader();
// 将文件以文本形式读入页面
reader.readAsText(f);
reader.onload = function(e){
file_reader_result.innerHTML = this.result;
}
}
</script>
</section>
</article>
</body>
</html>위 내용은 HTML5 학습 FileReader 인터페이스 코드 예시 공유 9(그림)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7658
15
1393
52
91
11
73
19
38
113
컴퓨터 마더보드의 내부 인터페이스는 무엇입니까? 컴퓨터 마더보드의 내부 인터페이스에 대한 권장 소개
Mar 12, 2024 pm 04:34 PM
컴퓨터를 조립할 때 설치 과정은 간단하지만 배선에 문제가 발생하는 경우가 종종 있습니다. 컴퓨터가 켜지면 F1 오류 "CPUFanError"가 발생하며 이로 인해 CPU 쿨러가 지능적으로 속도를 조정할 수 없게 됩니다. 컴퓨터 마더보드의 CPU_FAN, SYS_FAN, CHA_FAN, CPU_OPT 인터페이스에 대한 상식을 공유해 보겠습니다. 컴퓨터 마더보드의 CPU_FAN, SYS_FAN, CHA_FAN 및 CPU_OPT 인터페이스에 대한 대중적인 과학 1. CPU_FANCPU_FAN은 CPU 라디에이터 전용 인터페이스이며 12V에서 작동합니다.
Go 언어의 일반적인 프로그래밍 패러다임 및 디자인 패턴
Mar 04, 2024 pm 06:06 PM
현대적이고 효율적인 프로그래밍 언어인 Go 언어에는 개발자가 유지 관리 가능한 고품질 코드를 작성하는 데 도움이 될 수 있는 풍부한 프로그래밍 패러다임과 디자인 패턴이 있습니다. 이 기사에서는 Go 언어의 일반적인 프로그래밍 패러다임과 디자인 패턴을 소개하고 구체적인 코드 예제를 제공합니다. 1. 객체지향 프로그래밍 Go 언어에서는 구조와 메소드를 사용하여 객체지향 프로그래밍을 구현할 수 있습니다. 구조를 정의하고 구조에 대한 바인딩 방법을 통해 데이터 캡슐화 및 동작 바인딩의 객체 지향 기능을 구현할 수 있습니다. 패키지메니
PHP 인터페이스 소개 및 정의 방법
Mar 23, 2024 am 09:00 AM
PHP 인터페이스 소개 및 정의 방법 PHP는 웹 개발에 널리 사용되는 오픈 소스 스크립팅 언어입니다. 유연하고 간단하며 강력합니다. PHP에서 인터페이스는 여러 클래스 간의 공통 메서드를 정의하여 다형성을 달성하고 코드를 보다 유연하고 재사용 가능하게 만드는 도구입니다. 이 기사에서는 PHP 인터페이스의 개념과 이를 정의하는 방법을 소개하고 사용법을 보여주는 특정 코드 예제를 제공합니다. 1. PHP 인터페이스 개념 인터페이스는 클래스 애플리케이션을 정의하는 객체 지향 프로그래밍에서 중요한 역할을 합니다.
NotImplementedError()에 대한 솔루션
Mar 01, 2024 pm 03:10 PM
오류의 원인은 Python입니다. Tornado에서 NotImplementedError()가 발생하는 이유는 추상 메서드나 인터페이스가 구현되지 않았기 때문일 수 있습니다. 이러한 메서드나 인터페이스는 상위 클래스에서 선언되지만 하위 클래스에서는 구현되지 않습니다. 서브클래스가 제대로 작동하려면 이러한 메서드나 인터페이스를 구현해야 합니다. 이 문제를 해결하는 방법은 부모 클래스에서 선언한 추상 메서드나 인터페이스를 자식 클래스에 구현하는 것입니다. 다른 클래스에서 상속하기 위해 클래스를 사용하는 경우 이 오류가 표시되면 상위 클래스에 선언된 모든 추상 메서드를 하위 클래스에 구현해야 합니다. 인터페이스를 사용하고 있는데 이 오류가 표시되면 인터페이스를 구현하는 클래스의 인터페이스에 선언된 모든 메서드를 구현해야 합니다. 어느 것이 확실하지 않은 경우
Java의 디자인 패턴에 인터페이스 및 추상 클래스 적용
May 01, 2024 pm 06:33 PM
인터페이스와 추상 클래스는 분리 및 확장성을 위해 디자인 패턴에 사용됩니다. 인터페이스는 메서드 시그니처를 정의하고 추상 클래스는 부분 구현을 제공하며 하위 클래스는 구현되지 않은 메서드를 구현해야 합니다. 전략 패턴에서는 인터페이스를 사용하여 알고리즘을 정의하고 추상 클래스 또는 구상 클래스를 통해 구현을 제공하므로 알고리즘을 동적으로 전환할 수 있습니다. 관찰자 패턴에서 인터페이스는 관찰자 동작을 정의하는 데 사용되며 추상 또는 구체적인 클래스는 알림을 구독하고 게시하는 데 사용됩니다. 어댑터 패턴에서 인터페이스는 기존 클래스를 조정하는 데 사용됩니다. 추상 클래스 또는 구체적인 클래스는 호환되는 인터페이스를 구현하여 원본 코드와 상호 작용할 수 있습니다.
Hongmeng 시스템에 대한 통찰력: 실제 기능 측정 및 사용 경험
Mar 23, 2024 am 10:45 AM
Huawei가 출시한 새로운 운영 체제인 Hongmeng 시스템은 업계에 큰 반향을 불러일으켰습니다. 미국의 금지 조치 이후 화웨이가 시도한 새로운 시도인 훙멍(Hongmeng) 시스템은 큰 기대와 기대를 모으고 있다. 최근에는 운이 좋게도 Hongmeng 시스템이 탑재된 Huawei 휴대폰을 구입하게 되었습니다. 일정 기간의 사용과 실제 테스트를 거쳐 Hongmeng 시스템의 일부 기능 테스트와 사용 경험을 공유하겠습니다. 먼저 Hongmeng 시스템의 인터페이스와 기능을 살펴보겠습니다. Hongmeng 시스템은 전체적으로 Huawei 고유의 디자인 스타일을 채택하여 작동이 간단하고 명확하며 원활합니다. 데스크탑에서는 다양한
Java에서 인터페이스 및 추상 클래스의 내부 클래스 구현
Apr 30, 2024 pm 02:03 PM
Java를 사용하면 인터페이스 및 추상 클래스 내에서 내부 클래스를 정의할 수 있으므로 코드 재사용 및 모듈화에 대한 유연성이 제공됩니다. 인터페이스의 내부 클래스는 특정 기능을 구현할 수 있고, 추상 클래스의 내부 클래스는 일반 기능을 정의할 수 있으며, 서브클래스는 구체적인 구현을 제공합니다.
Java 인터페이스 및 추상 클래스: 프로그래밍 천국으로 가는 길
Mar 04, 2024 am 09:13 AM
인터페이스: 구현이 없는 계약 인터페이스는 Java에서 일련의 메소드 서명을 정의하지만 구체적인 구현을 제공하지는 않습니다. 이는 인터페이스를 구현하는 클래스가 지정된 메서드를 구현하도록 강제하는 계약 역할을 합니다. 인터페이스의 메서드는 추상 메서드이며 메서드 본문이 없습니다. 코드 예: publicinterfaceAnimal{voideat();voidsleep();} 추상 클래스: 부분적으로 구현된 블루프린트 추상 클래스는 하위 클래스에서 상속할 수 있는 부분 구현을 제공하는 상위 클래스입니다. 인터페이스와 달리 추상 클래스에는 구체적인 구현과 추상 메서드가 포함될 수 있습니다. 추상 메소드는 abstract 키워드로 선언되며 서브클래스에 의해 재정의되어야 합니다. 코드 예: publicabstractcla
