标签:
使用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) | 终端读取操作 |
标签:
原文地址:http://www.cnblogs.com/skywalkerfly/p/4725599.html