您的位置：首页 > 其它

使用file把文件读取到浏览器并用进度条显示

2017-07-18 00:44 274 查看

这里FileReader只是从磁盘把文件读取到浏览器，并没有发送到服务器。

<body>
文件浏览：
<input type="file" id="images" multiple /><br />
<progress id="pro" value="0"></progress>
<div id="result"></div>

<input type="button" value="显示" onclick="showdatelists();" />
<input type="button" value="读取二进制" onclick="readerBinary();" />
<script>
var showdatelists = function () {
var imageEle = document.getElementById("images");
var filelist = imageEle.files;
for (var i = 0; i < filelist.length; i++)
{
var file = filelist[i];
div = document.createElement("div");
div.innerHTML = "第" + (i + 1) + "个文件名字是：" + file.name + ",文件大小是：" + file.size + "文件类型是：" + file.type;
document.body.appendChild(div);
}
}
</script>
<script>
var reader = null;
if (FileReader) {
reader = new FileReader();
}
else {
alert("不支持");
}
var readerBinary = function ()
{
reader.readAsArrayBuffer(document.getElementById("images").files[0]);
var pro = document.getElementById("pro");
pro.max = document.getElementById("images").files[0].size;
//读取不中断则触发该事件
reader.onprogress = function (evt)
{
pro.value = evt.loaded;
}
}
</script>

</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航