Home > Article > Web Front-end > Detailed introduction to HTML5 FileReader interface
1. FileReader Overview
FileReader object allows a web application to asynchronously read the contents of a file (or raw data buffer) stored on the user's computer, using File
or Blob
object specifies the file or data to be read.
The File object can be a FileList
object returned after the user selects a file on an d5fd7aea971a85678ba271703566ebfd
element, or it can be generated by a drag-and-drop operation. The DataTransfer
object can also be the result returned after executing the
mozGetAsFile() method on a HTMLCanvasElement
.
2. FileReader interface method
Method name | Parameters | Description |
##readAsBinaryString | file | Read the file as binary code |
readAsText | file,[encoding] | Read file as text |
readAsDataURL | file | Read file as DataURL |
readAsArrayBuffer | file | Read the file as an ArrayBuffer object
|
abort | (none) | Abort read operation |
event | Description |
Triggered when data reading is interrupted | |
Triggered when data reading error occurs | |
Triggered when data reading starts | |
Data reading | |
Triggered when data reading is successfully completed | |
Triggered when data reading is completed, regardless of success or failure |
4. Usage examples
<!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>
The above is the detailed content of Detailed introduction to HTML5 FileReader interface. For more information, please follow other related articles on the PHP Chinese website!