Parsing the usage of FileReader interface in HTML5-CSS Tutorial-php.cn

Parsing the usage of FileReader interface in HTML5

巴扎黑

Release： 2017-09-02 10:10:53

Original

1633 people have browsed it

The FileReader interface provides an asynchronous API. Using this API, you can asynchronously access the file system in the browser's main thread and read the data in the file. Here, I will share with you a detailed example of how to use the FileReader interface in HTML5 through this article. If you are interested Friends, let’s take a look.

is used to read the file into the memory and read the data in the file. The FileReader interface provides an asynchronous API, which can be used to access the file system asynchronously in the browser's main thread and read data in the file. So far, only FF3.6+ and Chrome6.0+ have implemented the FileReader interface.

1. Methods of the FileReader interface

The FileReader interface has 4 methods, 3 of which are used to read files, and the other is used to Interrupt reading. Regardless of whether the read succeeds or fails, the method does not return the read result, which is stored in the result attribute.

Methods of FileReader interface

##Method nameParametersDescriptionreadAsBinaryStringfileRead the file as binary encodingreadAsTextfile,[encoding]Read file as textreadAsDataURL fileRead the file as DataURLabort(none)Terminal read operation

2. FileReader interface events

The FileReader interface contains a complete set of event models for capturing read files status at the time.

Events of FileReader interface

##EventonabortonerroronloadstartonprogressonloadSuccessonloadendregardless of success or failure

Description
Interrupt
Error
Start
Reading
	Reading
Reading completed,

3. Use of FileReader interface

<script type="text/javascript">  
var result=document.getElementById("result");  
var file=document.getElementById("file");  
//判断浏览器是否支持FileReader接口  
if(typeof FileReader == &#39;undefined&#39;){  
    result.InnerHTML="<p>你的浏览器不支持FileReader接口！</p>";  
    //使选择控件不可操作  
    file.setAttribute("disabled","disabled");  
}  
function readAsDataURL(){  
    //检验是否为图像文件  
    var file = document.getElementById("file").files[0];  
    if(!/image\/\w+/.test(file.type)){  
        alert("看清楚，这个需要图片！");  
        return false;  
    }  
    var reader = new FileReader();  
    //将文件以Data URL形式读入页面  
    reader.readAsDataURL(file);  
    reader.onload=function(e){  
        var result=document.getElementById("result");  
        //显示文件  
        result.innerHTML=&#39;<img src="&#39; + this.result +&#39;" alt="" />&#39;;  
    }  
}  
function readAsBinaryString(){  
    var file = document.getElementById("file").files[0];  
    var reader = new FileReader();  
    //将文件以二进制形式读入页面  
    reader.readAsBinaryString(file);  
    reader.onload=function(f){  
        var result=document.getElementById("result");  
        //显示文件  
        result.innerHTML=this.result;  
    }  
}  
function readAsText(){  
    var file = document.getElementById("file").files[0];  
    var reader = new FileReader();  
    //将文件以文本形式读入页面  
    reader.readAsText(file);  
    reader.onload=function(f){  
        var result=document.getElementById("result");  
        //显示文件  
        result.innerHTML=this.result;  
    }  
}  
</script>  
<p>  
    <label>请选择一个文件：</label>  
    <input type="file" id="file" />  
    <input type="button" value="读取图像" onclick="readAsDataURL()" />  
    <input type="button" value="读取二进制数据" onclick="readAsBinaryString()" />  
    <input type="button" value="读取文本文件" onclick="readAsText()" />  
</p>  
<p id="result" name="result"></p>

Copy after login

The above is the detailed content of Parsing the usage of FileReader interface in HTML5. For more information, please follow other related articles on the PHP Chinese website!