使用FileReader的实例将文件读取到浏览器
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style>
{
margin: 0;
padding: 0;
}
.box{
width: 300px;
height: 32px;
border: 2px solid #666;
border-radius: 16px;
overflow: hidden;
text-align: center;
}
.inner{
height: 32px;
background-color: yellowgreen;
width: 0%;
}
</style>
</head>
<body>
<input type="file" id="fileUpload" multiple>
<input type="button" id="fileInfo" value="元数据">
<input type="button" id="getDataURL" value="读取URL">
<input type="button" id="getText" value="读取文本">
<input type="button" id="getBinary" value="二进制读取">
<p></p>
<progress max="100" min="0" width="600" value="80"></progress>
<div class = "box">
<div class = "inner"></div>
</div>
</body>
<script type="text/javascript">
//上传域对象
var fileInput = document.getElementById("fileUpload");
/
上传域对象包含一个files属性。其中保存选中文件对象集合。每个文件对象中都包含选中文件的
元数据。
元数据：通常包含文件名，文件大小 类型 上一次修改时间，时长等描述信息，但并不是文件本身。
/
/
H5为我们提供了新的文件读取方式 ，使用FileReader的实例将文件读取到浏览器。
readAsDataURL: 将文件读取成url类型的数据。
readAsText: 将文件读取成文本形式。
readAsBinaryString：将文件读取为2进制字符串。
*/
//输出选中文件的文件名元数据信息
document.getElementById("fileInfo").onclick = function(){
//获取文件列表
if(fileInput.files.length > 0){
var files = fileInput.files;
for(var n=0;n<files.length;n++){
console.log(files[n].name+": "+files[n].size);
}
}else{
console.log("请选择文件！");
}
};
//DataURL方式输出选中文件内容
document.getElementById("getDataURL").onclick = function(){
//获取文件列表
if(fileInput.files.length > 0){
var files = fileInput.files;
for(var n=0;n<files.length;n++){
//创建文件读取对象
var reader = new FileReader();
reader.readAsDataURL(files[n]);
//文件读取完毕触发reader的onload事件
reader.onload = function(){
// 创建img标签
var img = document.createElement("img");
// result属性的值，读取的结果
img.src = this.result;
// 将图片添加到body中
document.body.appendChild(img);
}
}
}else{
console.log("请选择文件！");
}
};
//文本方式输出选中文件内容
document.getElementById("getText").onclick = function(){
//获取文件列表
if(fileInput.files.length > 0){
var files = fileInput.files;
for(var n=0;n<files.length;n++){
//创建文件读取对象
var reader = new FileReader();
reader.readAsText(files[n], "utf-8");
//文件读取完毕
reader.onload = function(){
document.querySelector("p").innerText += this.result;
}
}
}else{
console.log("请选择文件！");
}
};
//二进制方式输出选中文件内容
document.getElementById("getBinary").onclick = function(){
//获取文件列表
if(fileInput.files.length > 0){
var files = fileInput.files;
for(var n=0;n<files.length;n++){
//创建文件读取对象
var reader = new FileReader();
reader.readAsBinaryString(files[n]);
//文件读取完毕
reader.onload = function(){
document.write(this.result);
}
reader.onprogress = function(e){
var per = parseInt(e.loaded/e.total * 100)+"%";
document.querySelector(".inner").style.width = per;
};
}
}else{
console.log("请选择文件！");
}
};
</script>
</html>
网友评论