当前位置:首页 > HTML5 文件上传

HTML5 文件上传

发布于 2018-04-08 阅读 591 次 Javascript HTML5
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html5上传</title>
    <style>
        div{padding:20px;}
    </style>
</head>
<body>
    <input type="file" id="file" multiple />
    <div id="details"></div>
    <button onclick="showFile()">提交</button>
    <div><progress id="Progress" value="0" max="100" /></div>
    <script type="text/javascript">
        function showFile () {
            var files,item,len,i,filename,filesize,type,dstr;
            var details = document.getElementById("details");
            files = document.getElementById("file").files;
            // console.log(files);
            for(i=0, len=files.length; i<len; i++){
                var s='';
                var oSpan = document.createElement("span");
                // console.log(oSpan)
                oSpan.innerHTML = (i+1)+'.->'+files[i].name+'文件大小:' + files[i].size;
                details.appendChild(oSpan);
                getFile(files[i]);
            }
        }
        //通过filereader接口获取文件
        function getFile(file){
            if(FileReader){
                var start = 0,end = 0,length = 1000;
                var fr = new FileReader();
                // fr.readAsText(file,[encoding]);//默认是utf-8编码
                //  fr.readAsBinaryString(file); //二进制读取
                var readBlob = function(file,start,end){
                    // alert(1)
                    if(file.webkitSlice){
                        var blob = file.webkitSlice(start, end);
                    }else if(file.mozSlice){
                        var blob = file.mozSlice(start, end);
                    }else{
                        var blob = file.slice(start, end);
                    }
                    fr.readAsDataURL(blob);
                };
                readBlob(file, start, end);
                // 读取中断的时候触发
                fr.onabort = function(){
                };
                //  出错时触发
                fr.onerror = function(){
                };
                //读取成功时触发
                fr.onload = function(e){
                    if(end ==  file.size) return;
                    console.log(file.name,start,end);
                    var head = end;
                    end = (start + length) > file.size ? (file.size) : (start + length);
                    start = head;
                    readBlob(file, start, end);
                };
                // 读取完成是触发,无论成功还是失败
                fr.onloadend = function(){

                };
                // 开始读取的时候触发
                fr.onloadstart = function(file,start,end){
                };
                // 读取过程中触发
                fr.onprogress = function(e){
                    var pro = document.getElementById("Progress"),
                        percent = end/file.size;
                        console.log(e,percent)
                    // console.log(e)
                    // console.log(e.loaded);
                };
            }else{
                alert("Your browser doesn't support FileReader");
            }
        }
    </script>
</body>
</html>