HTML5中丰富了input 标签type为file的操作。
这张效果图是在Opera中的。主要实现了上传图片的预览功能。
提供了一个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>
使用的效果图如下：
其中还结合了progress元素。能动态显示加载的进度。
扫一扫
13万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
