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

最新推荐文章于 2022-09-15 22:00:00 发布

Jos1n

最新推荐文章于 2022-09-15 22:00:00 发布

阅读量2.1k

点赞数 1

分类专栏： html5 文章标签： html5

本文链接：https://blog.csdn.net/Jos1n/article/details/75269844

版权

本文介绍如何利用HTML5的FileReader接口将本地文件读取到浏览器，并结合进度条展示读取进度，整个过程不涉及文件上传到服务器。

摘要由CSDN通过智能技术生成

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

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


    <input type="button" value="显示" οnclick="showdatelists();" />
    <input type="button" value="读取二进制" οnclick="readerBinary();" />
    <script>
        var showdatelists = function () {
            var imageEle = document.getElementById("images");
            var filelist = imageEle.files;
            for (var i =