HTML5 학습 FileReader 인터페이스 코드 예시 공유 9(그림)
- 黄舟원래의
- 2017-03-13 17:27:011338검색
1. FileReader 개요
FileReader 개체를 사용하면 웹 애플리케이션이 사용자의 컴퓨터에 저장된 파일(또는 원시 데이터 버퍼)을 비동기적으로 읽을 수 있습니다. 읽을 파일이나 데이터를 지정하는 File 또는 Blob 개체입니다.
파일 개체는 사용자가 个d5fd7aea971a85678ba271703566ebfd 요소에서 파일을 선택한 후 반환된 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.