使用html5的FileReader可以实现多媒体文件的预览功能，代码如下：
<html>
<head>
<script type="text/javascript">
var fileReader = new FileReader();
fileReader.onload = function(event)
{
document.getElementById(‘image‘).src = event.target.result;
}
function showImage()
{
var file = document.getElementById("files").files[0];
fileReader.readAsDataURL(file);
}
</script>
</head>
<body>
<input type="file" id="files" value="files" onchange="showImage();"/>
<div>
<img src="" id="image" style="width:500px;height:500px;"/>
</div>
</body>
</html>
代码效果如下：
FileReader接口有如下方法：
| 方法名 | 参数 | 描述 |
|---|---|---|
| readAsBinaryString | file | 将文件读取为二进制编码 |
| readAsText | file,[encoding] | 将文件读取为文本 |
| readAsDataURL | file | 将文件读取为DataURL |
| abort | (none) | 终端读取操作 |
FileReader.onload 为上传成功的回调函数
APQL}F_UEH_%8NRQ0D`@Q.png)
时间： 2024-12-28 13:32:01