HTML5-6【读取文件、分割文件、监控读取文件进度】

最新推荐文章于 2023-01-05 17:00:48 发布

可乐雪碧薄荷糖

最新推荐文章于 2023-01-05 17:00:48 发布

阅读量309

点赞数 2

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

本文链接：https://blog.csdn.net/Yesterday_Tomorrow/article/details/113585850

版权

HTML5 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一.读取文件

(1).文件读取

<input type="file" id="fileInput"/>
    <script>
        let input = document.getElementById('fileInput');
        input.addEventListener('change',(e)=>{
            let reader = new FileReader();
            reader.onload = ()=>{
                console.log(reader.result);
            }
            reader.readAsText(input.files[0]);
        },false)
    </script>

(2).图片读取

 <input type="file" id="fileInput"/>
    <script>
        let input = document.getElementById('fileInput');
        input.addEventListener('change',(e)=>{
            let reader = new FileReader();
            reader.onload = ()=>{
               let img = new Image();
               img.src = reader.result;
               document.body.appendChild(img);
            }
            reader.readAsDataURL(input.files[0]);
        },false)
    </script>

二.分割文件

(1).分割方法

let blob = file.slice(startingByte,endingByte)

(2).实际案例

<body>
    <input type="file" id="files" name="file"/>
    读取的字节:
    <span class="readBytesButtons">
        <button data-startbyte="0" data-endbyte="4">1-5</button>
        <button data-startbyte="5" data-endbyte="14">6-15</button>
        <button data-startbyte="6" data-endbyte="7">7-8</button>
        <button>整个文件</button>
    </span>
    <div id="byteRange"></div>
    <div id="byteContent"></div>
    <script>
        let readBytesButtons = document.getElementsByClassName('readBytesButtons')[0],
            inputFiles = document.getElementById('files');
        function readBlob(startByte,stopByte){
            let files = inputFiles.files;
            if(!files.length){
                alert('请选择一个文件');
                return;
            }
            let file = files[0],
                start = parseInt(startByte) || 0,
                stop = parseInt(stopByte) || file.size - 1,
                byteRange = document.getElementById('byteRange'),
                byteContent = document.getElementById('byteContent');
            let reader = new FileReader();
            reader.onloadend = (e)=>{
                if(e.target.readyState == FileReader.DONE){
                    byteRange.textContent = `Read bytes: ${start+1} - ${stop+1} of ${file.size} bytes file`
                    byteContent.textContent = e.target.result;
                }
            }     
            let blob = file.slice(start,stop+1);
            reader.readAsBinaryString(blob);

        }    
        readBytesButtons.addEventListener('click',(e)=>{
            if(e.target.tagName.toLowerCase() == 'button'){
                let startByte = e.target.getAttribute('data-startbyte'),
                    endByte = e.target.getAttribute('data-endbyte')
                readBlob(startByte,endByte)    
            }
        })
    </script>
</body>

三.监控读取文件进度

onloadstart

onprogress

<style>
        #progressBar{
            width: 500px;
            margin: 10px 0;
            padding: 3px;
            border: 1px solid #000;
            font-size: 14px;
            opacity: 0;
            transition: opacity 1s linear;
        }
        #progressBar.loading{
            opacity: 1;
        }
        #progressBar .percent{
            background-color: #99ccff;
            height: auto;
            width: 0;
        }
    </style>
</head>
<body>
    <input type="file" id="files">
    <button onclick="abortRead()">取消读取</button>
    <div id="progressBar">
        <div class="percent">0%</div>
    </div>
    <script>
        let files = document.getElementById('files'),
            percent = document.getElementsByClassName('percent')[0],
            progressBar = document.getElementById('progressBar'),
            reader;
        function updateProgress(e){
            if(e.lengthComputable){
                let percentLoaded = Math.round((e.loaded/e.total)*100);
                if(percentLoaded < 100){
                    percent.style.width = percentLoaded + '%';
                    percent.textContent = percentLoaded + '%';
                }
            }
        }  
        function errorHandler(e){
            switch(e.target.error.code){
                case e.target.error.NOT_FOUND_ERR:
                    alert('文件未找到');
                    break;
                case e.target.error.NOT_READABLE_ERR:
                    alert('文件不可读取');
                    break;
                case e.target.error.ABORT_ERR:
                    break;     
                default:
                    alert('在读取文件的过程中，发生了一个错误')    
            }
        }  
        function abortRead(){
            reader.abort();
        }
        function handleFileSelect(e){
            percent.style.width = '0%';
            percent.textContent = '0%';
            reader = new FileReader();
            reader.onloadstart = ()=>{
                progressBar.className = 'loading';
            }
            reader.onprogress = updateProgress;
            reader.onload=(e)=>{
                percent.style.width = '100%';
                percent.textContent = '100%';
            }
            reader.onerror = errorHandler
            reader.onabort = (e)=>{
                alert('文件已经取消')
            }
            reader.readAsDataURL(e.target.files[0]);
        }
        files.addEventListener('change',handleFileSelect,false)
    </script>
</body>

可乐雪碧薄荷糖

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
HTML5-6【读取文件、分割文件、监控读取文件进度】

一.读取文件(1).文件读取<input type="file" id="fileInput"/> <script> let input = document.getElementById('fileInput'); input.addEventListener('change',(e)=>{ let reader = new FileReader(); reader.onlo
复制链接

扫一扫