您的位置：首页 > Web前端 > HTML5

HTML5 中的文件（File）操作

2014-05-06 16:34 453 查看

HTML5中丰富了input 标签type为file的操作。

提供了一个multiple属性。以及提供了在浏览器中操作file的接口。

type:上传文件的mime属性

name:上传文件的name属性

不过最重要的还是FileReader接口，可以实现文件内容读取。

目前，FileReader接口支持的比较好的是：Firefox,Opera。

FileReader有三个方法可以获取文件内容：

readAsDataURL();//返回一个DataURL链接，可以作为<img />标签的src属性值

readAsText();//返回文件文本

readAsBinaryString();//返回文件的二进制格式。

所以以下的代码是基于Opera中的。也只有这两个浏览器可用。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>fileReader对象的事件先后顺序</title>
<script type="text/javascript">
var result = document.getElementById('result');
if(typeof FileReader == 'undefined'){
result.innerHTML = '<p>抱歉，您的浏览器不支持FileReader</p>';
var file = document.getElementById('file');
file.setAttribute('disabled','disabled');
}
function readFile(){
var file = document.getElementById('file').files[0];
var result = document.getElementById('result');
var reader = new FileReader();
reader.onload = function(e){
result.innerHTML = "<img src='"+this.result+"' />";
}
reader.onprogress = function(e){
//alert('progress');
var total = e.total;
var loaded = e.loaded;
var progress = document.getElementById('progress');
progress.value = (loaded/total)*progress.max;
}
reader.onloadend = function(e){
if(e.total!=0){
var progress = document.getElementById('progress');
progress.value = progress.max;
}
}
reader.readAsDataURL(file);
}
</script>
</head>

<body>
<p>
<label>请选择一个图像文件：</label>
<input type="file" id="file" />
<input type="button" onClick="readFile()" value="显示图像" />
<progress id="progress" max="100" value="" />
</p>
<div name="result" id="result">
</div>
</body>
</html>

使用的效果图如下：

这张效果图是在Opera中的。主要实现了上传图片的预览功能。

其中还结合了progress元素。能动态显示加载的进度。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航