html5 FileReader初识
生活随笔
收集整理的這篇文章主要介紹了
html5 FileReader初识
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
使用html5的FileReader可以實(shí)現(xiàn)多媒體文件的預(yù)覽功能,代碼如下:
<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" οnchange="showImage();"/><div><img src="" id="image" style="width:500px;height:500px;"/></div>
</body>
</html>
代碼效果如下:
?
FileReader接口有如下方法:
| 方法名 | 參數(shù) | 描述 |
|---|---|---|
| readAsBinaryString | file | 將文件讀取為二進(jìn)制編碼 |
| readAsText | file,[encoding] | 將文件讀取為文本 |
| readAsDataURL | file | 將文件讀取為DataURL |
| abort | (none) | 終端讀取操作 |
轉(zhuǎn)載于:https://www.cnblogs.com/skywalkerfly/p/4725599.html
總結(jié)
以上是生活随笔為你收集整理的html5 FileReader初识的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Caused by: java.sql.
- 下一篇: 企业支付宝账号开发接口实现