欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

HTML5之FileReader的使用

程序员文章站 2022-05-01 21:09:20
...

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<style type="text/css">
    #drag {
    width: 300px;
    height: 200px;
    border: 1px solid #000;
}
</style>
</head>
<body>
<form>  
    <fieldset>  
        <legend>分度读取文件:</legend>  
        <input type="file" id="File" />  
        <input type="button" value="中断" id="Abort" />  
        <p>  
            <label>读取进度:</label><progress id="Progress" value="0" max="100"></progress>  
        </p>  
        <p id="Status"></p>  
    </fieldset>  
</form>  
<!-- 
<input type="file" name="file" onchange="showPreview(this)" />  
 <img id="portrait" src="" width="70" height="75">   -->
<script>
// window.open("http://img.taopic.com/uploads/allimg/120727/201995-120HG1030762.jpg")
      // function showPreview(source) {  
      //       var file = source.files[0];  
      //       if(window.FileReader) {  
      //           var fr = new FileReader();  
      //           fr.onloadend = function(e) {  
      //               document.getElementById("portrait").src = e.target.result;  
      //           };  
      //            fr.readAsDataURL(file);  
      //       }  
      //   }  
 var h = {  
    init: function() {  
        var me = this;  

        document.getElementById('File').onchange = me.fileHandler;  
        document.getElementById('Abort').onclick = me.abortHandler;  

        me.status = document.getElementById('Status');  
        me.progress = document.getElementById('Progress');  
        me.percent = document.getElementById('Percent');  

        me.loaded = 0;  
        //每次读取1M  
        me.step = 1024 * 1024;  
        me.times = 0;  
    },  
    fileHandler: function(e) {  
        var me = h;  

        var file = me.file = this.files[0];  

        var reader = me.reader = new FileReader();  

        //  
        me.total = file.size;  

        reader.onloadstart = me.onLoadStart;  
        reader.onprogress = me.onProgress;  
        reader.onabort = me.onAbort;  
        reader.onerror = me.onerror;  
        reader.onload = me.onLoad;  
        reader.onloadend = me.onLoadEnd;  
        //读取第一块  
        me.readBlob(file, 0);  
    },  
    onLoadStart: function() {  
        var me = h;  
    },  
    onProgress: function(e) {  
        var me = h;  

        me.loaded += e.loaded;  
        //更新进度条  
        me.progress.value = (me.loaded / me.total) * 100;  
    },  
    onAbort: function() {  
        var me = h;  
    },  
    onError: function() {  
        var me = h;  

    },  
    onLoad: function() {  
        var me = h;  

        if(me.loaded < me.total) {  
            me.readBlob(me.loaded);  
        } else {  
            me.loaded = me.total;  
        }  
    },  
    onLoadEnd: function() {  
        var me = h;  

    },  
    readBlob: function(start) {  
        var me = h;  

        var blob,  
            file = me.file;  

        me.times += 1;  
         blob=file.slice(start, start + me.step + 1);  
        if(file.webkitSlice) {  
            blob = file.webkitSlice(start, start + me.step + 1);  
        } else if(file.mozSlice) {  
            blob = file.mozSlice(start, start + me.step + 1);  
        }  
           debugger
        me.reader.readAsText(blob);  
    },  
    abortHandler: function() {  
        var me = h;  

        if(me.reader) {  
            me.reader.abort();  
        }  
    }  
};  

h.init();  
</script>
</body>
</html>

HTML5之FileReader的使用

参考地址:https://blog.csdn.net/jackfrued/article/details/8967667