HTML5之FileReader的使用

最新推荐文章于 2024-07-26 08:29:23 发布

DenggLin

最新推荐文章于 2024-07-26 08:29:23 发布

阅读量160

点赞数

分类专栏： js

js 专栏收录该内容

47 篇文章 0 订阅

订阅专栏


<!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>