本文介绍了如何利用HTML5的FileReader接口实现图片预览上传功能。当用户选择文件后，通过FileReader的readAsDataURL方法将文件读取为DataURL，再在页面上创建img元素显示预览图。同时，文章提到了文件类型检查，确保上传的是图片。最后，展示了相关的HTML和JavaScript代码示例。
用户每个选择的文件都是一个files对象 而fileList对象则为这些files对象的列表 代表用户选择的所有文件。
FileReader接口主要用来把文件读入内存 并且读取文件中的数据。FileReader接口提供了一个异步api 使用该api可以在浏览器主线程中异步访问文件系统 读取文件中的数据。
readAsDataUrl ：将文件读取为DataURL
readAsText ：将文件读取为文本
要想上传文件 首先第一步实例化对象 ：
然后选择文件有相应对象文件 ：
<body>
<input type = "file" id = "file" />
<input type = "submit" id = "btn" />
<div id = "result">
</div>
<script>
var oFlie = document.getElementById("file")
var oBtn = document.getElementById("btn")
var oRes = document.getElementById("result")
oBtn.onclick = function(){
最低0.47元/天 解锁文章
扫一扫
126
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
