zoukankan      html  css  js  c++  java
  • HTML5 之 FileReader 方法上传并读取文件

    原文地址:https://caochangkui.github.io/file-upload/

    HTML5 的 FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。

    FileReader 事件

    • FileReader.onabort
      处理abort事件。该事件在读取操作被中断时触发。

    • FileReader.onerror
      处理error事件。该事件在读取操作发生错误时触发。

    • FileReader.onload
      处理load事件。该事件在读取操作完成时触发。

    • FileReader.onloadstart
      处理loadstart事件。该事件在读取操作开始时触发。

    • FileReader.onloadend
      处理loadend事件。该事件在读取操作结束时(要么成功,要么失败)触发。

    • FileReader.onprogress
      处理progress事件。该事件在读取Blob时触发。


    用法

    下面分别是上传csv文件和图片文件的两种用法:
    html部分

    <div style="border: 1px solid red;">
        <h2>上传CSV文件</h2>
        <input type="file" id="file" accept=".csv" onchange="uploadfile();" />
        <div id="result"> </div>
    </div>
    
    <br>
    <br>
    
    <div style="border: 1px solid red;">
        <h2>上传图片</h2>
        <input type="file" id="file2" accept="image/*" onchange="uploadfile2();" />
        <div id="result2">
            <img src="" alt="" id="img">
        </div>
    </div>
    

    js部分

    <script>
        // 上传csv格式的文件
        function uploadfile() {
            let reads = new FileReader();
            file = document.getElementById('file').files[0];
            reads.readAsText(file, 'utf-8');
            console.log(reads);
            reads.onload = function (e) {
                console.log(e)
                // document.getElementById('result').innerText = this.result
                document.getElementById('result').innerText = e.target.result
            };
            reads.onloadstart = function(e) {
                console.log('onloadstart ---> ', e)
            }
            reads.onloadend = function(e) {
                console.log('onloadend ---> ', e)
            }
            reads.onprogress = function(e) {
                console.log('onprogress ---> ', e)
            }
        }
    
        // 上传image
        function uploadfile2() {
            let reads = new FileReader();
            file = document.getElementById('file2').files[0];
            reads.readAsDataURL(file);
            console.log(reads);
            reads.onload = function (e) {
                document.getElementById('img').src = this.result;
            };
        }
    </script>
    
  • 相关阅读:
    ASP.NET中使用javascript
    遍历DataList控件
    史上最强劲之android模拟器命令详解
    Android开发环境配置简介
    Android模拟器adb命令介绍
    听一名普通android应用开发人员谈:怎样成为一名Android开发者
    android模拟器安装及优化(集锦)
    Ubuntu 快捷键集锦
    smplayer 中文字幕乱码,进度条及拖放MKV
    如何在Windows下搭建Android开发环境
  • 原文地址:https://www.cnblogs.com/cckui/p/9411518.html
Copyright © 2011-2022 走看看