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

来源：互联网发布：java用到哪些函数编辑：程序博客网时间：2024/05/18 14:42

这里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>

阅读全文

1 0