成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

html5文件上傳斷點(diǎn)續(xù)傳

sixleaves / 2248人閱讀

摘要：最近公司要做一個(gè)上傳的插件，要在下先實(shí)現(xiàn)功能，要求顯示上傳進(jìn)度，文件信息，斷點(diǎn)續(xù)傳等等。我一看，艾瑪，沒(méi)做過(guò)啊。沒(méi)辦法，，只能去查資料了。作為一名還未畢業(yè)的大學(xué)僧，本人表示亞歷山大。不過(guò)還好是做出來(lái)了，不敢說(shuō)代碼寫(xiě)得很好，大家將就著看吧。

最近公司要做一個(gè)html5上傳的jquery插件，要在下先實(shí)現(xiàn)功能，要求顯示上傳進(jìn)度，文件信息，斷點(diǎn)續(xù)傳等等。我一看，艾瑪！Σ(?д?lll)，沒(méi)做過(guò)啊。沒(méi)辦法，(# ?Д?)，只能去查資料了。
作為一名還未畢業(yè)的大學(xué)僧，本人表示亞歷山大。不過(guò)還好是做出來(lái)了，不敢說(shuō)代碼寫(xiě)得很好，大家將就著看吧。
感謝以下文章提供的思考方向：
http://www.script-tutorials.com/pure-html5-file-upload/
http://fex.baidu.com/blog/2014/04/html5-uploader/

由于傳的時(shí)候不小心，文件弄錯(cuò)了，現(xiàn)在bug已修復(fù)，對(duì)不起啊大家
考慮到服務(wù)器原因現(xiàn)在停止上傳演示頁(yè)面，抱歉請(qǐng)大家諒解
演示地址：暫停
資源地址：我是下載地址

HTML:





upload html5






    

        

        

        
        
        

            
            

                

                
            

            
            

                
剩余時(shí)間 | 00:00:00

                
100k/s

CSS:

style.css

/*************reset****************/
html{color:#333;-webkit-text-size-adjust:none;height:100%;max-height:100%;overflow: hidden;font-family: "Microsoft Yahei";}
body{height: 100%;max-height:100%;overflow: hidden;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,var,optgroup{font-style:inherit;font-weight:inherit;}
del,ins{text-decoration:none;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;}q:before,q:after{content:"";}
abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:baseline;}
sub{vertical-align:baseline;}legend{color:#000;}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{*font-size:100%;}
body{font-size:12px;}
a{color: #333333;text-decoration: none;}
a:hover{text-decoration:underline; color:#c00;}

/*font*/
*{
    font-size: 1.05em;
    color: #222;
    font-family: "Microsoft Yahei";
}

upload.css

#upload_box{
    padding:0em 1em;
    padding-top:20px;
    height:100%;
    background: #74b1d1;
    position: relative;
}

#upload_form{
    background: #fff;
    height: 80%;
    padding: 1.4em 1em;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.7);
}

#upload_form label{
    font-size: 1.5em;
    font-weight: bolder;
}

#file{
    margin:20px 0;
    border:1px solid #ccc;
    border-radius: 5px;
    padding: 0.5em;
    font-size: 1.4em;
    width: 90%;
}

#submit,#clear{
    font-size:1.2em;
    padding:0.3em 1.2em;
    border-radius:10px;
    border:1px solid #d9d9d9;
    background: -webkit-linear-gradient(#ffffff,#dfdfdf);
    background: -o-linear-gradient(#ffffff,#dfdfdf);
    background: -moz-linear-gradient(#ffffff,#dfdfdf);
    background: linear-gradient(#ffffff,#dfdfdf);
    box-shadow:0px 1px 3px rgba(0,0,0,0.7);
    outline: none;
}

#submit{
    margin-right:1.6em;
}

#submit:hover,#clear:hover{
    background: -webkit-linear-gradient(#66ccff,#74b1d1);
    background: -o-linear-gradient(#66ccff,#74b1d1);
    background: -moz-linear-gradient(#66ccff,#74b1d1);
    background: linear-gradient(#66ccff,#74b1d1);
    cursor: pointer;
}

.upload_message_show{
    margin-top: 20px;
    display: none;
}

.upload_file_message{
    padding: 1.4em 0em;
    padding-left: 60%;
    padding-right: 1.2em;
    border-radius: 10px;
    background: -webkit-linear-gradient(#dfdfdf,#cccccc);
    background: -o-linear-gradient(#dfdfdf,#cccccc);
    background: -moz-linear-gradient(#dfdfdf,#cccccc);
    background: linear-gradient(#dfdfdf,#cccccc);
    font-size: 1.1em;
    font-weight: bolder;
    position: relative;
    min-height: 6.5em;
}

.upload_file_error{
    color:red;
}

.message_box{
    position: absolute;
    left: 1.2em;
    top: 1.4em;
}

.upload_file_preview{
    height: 100%;
    position: relative;
}

.upload_bar_box{
    width: 100%;
    height: 1em;
    border-radius:0.5em;
    position: relative;
    box-shadow:0px 0px 3px rgba(0,0,0,0.6);
    line-height: 1em;
}

.upload_bar{
    width:0%;
    border-radius:0.5em;
    background:-webkit-linear-gradient(#F01731,#F50B43);
    background:-o-linear-gradient(#F01731,#F50B43);
    background:-moz-linear-gradient(#F01731,#F50B43);
    background:linear-gradient(#F01731,#F50B43);
    height:100%;
}

.upload_percent{
    position: absolute;
    right: 10px;
    top:0em;
    font-weight:700;
}

.upload_count{
    width: 100%;
    font-size:0.8em;
    margin-top:1em;
    position: relative;
}

.left_time{
    margin-left: 1em;
}

.speed{
    position: absolute;
    right:1em;
    top: 0em;
}

js:

變量定義：

var nSlice_count = 100,//分段數(shù)，文件分段數(shù)
    nFactCount,           //實(shí)際分段數(shù)
    nMin_size      = 0.5,//最小分段大小(M)
    nMax_size     = 5,  //最大分段大小(M)
    nFactSize,           //實(shí)際分段大小
    nCountNum     = 0,  //分段標(biāo)號(hào)
    sFile_type,           //文件類型
    nFile_load_size,   //文件上傳部分大小
    nFile_size,           //文件大小
    nPreuploaded = 0,  //上一次記錄上傳部分的大小
    bIs_uploading= false,//是否上傳中
    bStart_upload= false,//是否開(kāi)始上傳
    bEnd_upload  = false;//是否上傳完成

當(dāng)文件域變化或者點(diǎn)擊清空時(shí)，重置所有已記錄信息：

function messageChange(){
    document.querySelector(".upload_file_name").innerHTML ="文件名稱: " ;
    document.querySelector(".upload_file_type").innerHTML ="文件類型: " ;
    document.querySelector(".upload_file_size").innerHTML ="文件大小: " ;
    document.querySelector(".isCompleted").innerHTML       ="上傳狀態(tài): " ;
    document.querySelector(".upload_bar").style.width = "0%";
    document.querySelector(".upload_percent").innerHTML = "0%";
    document.querySelector(".upload_file_preview").innerHTML ="";
    document.querySelector(".upload_message_show").style.display = "none";
}

function clearUploadFile(e){
    var e = e || event;
    e.stopPropagation();
    e.preventDefault();
    document.getElementById("file").value = "";
    bStart_upload = false;
    messageChange();
}


function fileReady(){
    bIs_uploading = false;
    bEnd_upload = false;
    nCountNum = 0;
    bStart_upload = false;
    messageChange();
}

發(fā)生錯(cuò)誤時(shí)的處理：

function errorUp(){
    bStart_upload = false;
    document.querySelector(".upload_file_error").innerHTML = "上傳過(guò)程中出錯(cuò)";
}

function abortUp(){
    bStart_upload = false;
    document.querySelector(".upload_file_error").innerHTML = "網(wǎng)絡(luò)故障，請(qǐng)檢查重試";
}

文件上傳后提供預(yù)覽，考慮到手機(jī)小屏幕的問(wèn)題，只在ipad和pc上提供預(yù)覽，預(yù)覽的文件類型為
image/video/audio，由于瀏覽器對(duì)多媒體格式的支持不同，不能保證每個(gè)文件都能正常播放

function filePreview($src){
    var ftype = sFile_type;
    var $temp;
    var IMGMaxHeight = document.querySelector(".upload_message_show").offsetHeight;
    switch(ftype){
        case "image" :
        $temp = "";
        break;
        case "audio" :
        $temp = "";
        break;
        case "video" :
        $temp = "";
        break;
    }
    var IsPreview = checkUserAgent();

    if(IsPreview)
    document.querySelector(".upload_file_preview").innerHTML = $temp;
}

function checkUserAgent(){
    var msg = true;
    var agent = ["ipod","iphone","android","symbian","windows mobile"];
    var info =navigator.userAgent.toLowerCase();
    
    for(var i=0,j=agent.length;i0)
        msg = false;
    }

    return msg;
}

數(shù)據(jù)單位轉(zhuǎn)化：

var conversion = (function(){
        var unitConversion = {
            bytesTosize:function(data){
                var unit = ["Bytes","KB","MB","GB"];
                var i = parseInt(Math.log(data)/Math.log(1024));
                return (data/Math.pow(1024,i)).toFixed(1) + " " + unit[i];
            },
            secondsTotime:function(sec){
                var h = Math.floor(sec/3600),
                    m = Math.floor((sec-h*3600)/60),
                    s = Math.floor(sec-h*3600-m*60);
                if(h<10) h = "0" + h;
                if(m<10) m = "0" + m;
                if(s<10) s = "0" + s;

                return h + ":" + m + ":" + s + ":";
            }
        };

        return unitConversion;
    })();

文件上傳和上傳時(shí)的計(jì)算：

//start sending
    var reader = new FileReader();
    var timer;

    var fProgress = function(e){
        var fSize = get_file_message.getAll().fileSize;
        timer = setTimeout(uploadCount(e,fSize,conversion),300);
    };

    var floadend = function(e){
        if(reader.error){alert("上傳失敗,出現(xiàn)未知錯(cuò)誤");clearTimeout(timer);return;}
        clearTimeout(timer);
        if(nCountNum+1!=nFactCount)
        {
            if(bStart_upload)
            {
                nCountNum++;
                uploadStart();
                return;
            } else {
                document.querySelector(".speed").innerHTML = "0k/s";
                document.querySelector(".left_time").innerHTML = "剩余時(shí)間 | 00:00:00";
                return;
            }        
        }

        bEnd_upload = true;
        document.querySelector(".layer_box").style.display = "none";
        document.querySelector(".speed").innerHTML = "0k/s";
        document.querySelector(".left_time").innerHTML = "剩余時(shí)間 | 00:00:00";
        document.querySelector(".upload_percent").innerHTML = "100.00%";
        document.getElementById("submit").value = "上傳";
        
        var $res = JSON.parse(e.target.responseText);
        filePreview($res);
        if($res.res=="success") bIs_uploading =true;
        document.querySelector(".isCompleted").innerHTML="上傳狀態(tài): " + (bIs_uploading?"上傳完成":"正在上傳..");
    };

    var uploadStart = function(){
        var get_all = get_file_message.getAll();
        var start = nCountNum * nFactSize,
            end   = Math.min(start+nFactSize,get_all.fileSize);

        var fData = new FormData();

        fData.append("file",file.slice(start,end));
        fData.append("name",file.name);
        fData.append("size",file.size);
        fData.append("type",file.type);
        fData.append("totalCount",nFactCount);
        fData.append("indexCount",nCountNum);
        fData.append("trueName",file.name.substring(0,file.name.lastIndexOf(".")));

        
        document.querySelector(".layer_box").style.display = "block";
        if(!sFile_type)
        sFile_type = file.type.substring(0,file.type.indexOf("/"));
        var xhr = new XMLHttpRequest();
        xhr.upload.addEventListener("progress",fProgress,false);
        xhr.addEventListener("load",floadend,false);
        xhr.addEventListener("error",errorUp,false);
        xhr.addEventListener("abort",abortUp,false);
        
        xhr.open("POST","php/send/");
        xhr.send(fData);
    };

    reader.onloadstart = function(){
        var get_all = get_file_message.getAll(),
            fName = get_all.fileName,
            fType = get_all.fileType,
            fSize = conversion.bytesTosize(get_all.fileSize);

        document.querySelector(".upload_message_show").style.display = "block";
        document.querySelector(".upload_file_name").innerHTML ="文件名稱: " + fName;
        document.querySelector(".upload_file_type").innerHTML ="文件類型: " + fType;
        document.querySelector(".upload_file_size").innerHTML ="文件大小: " + fSize;
        document.querySelector(".isCompleted").innerHTML       ="上傳狀態(tài): " + (bIs_uploading?"完成":"正在上傳中..");

        nFactSize = get_all.fileSize/nSlice_count;
        nFactSize = (nFactSize>=nMin_size*1024*1024?nFactSize:nMin_size*1024*1024);
        nFactSize = (nFactSize<=nMax_size*1024*1024?nFactSize:nMax_size*1024*1024);
        nFactCount= Math.ceil(get_all.fileSize/nFactSize);

        uploadStart();
    };


    reader.readAsBinaryString(file);
}

function uploadCount(e,fSize,conversion){
    var upSize = e.loaded+nCountNum*nFactSize,
        perc = (upSize*100/fSize).toFixed(2) + "%";
    var speed = Math.abs(upSize - nPreuploaded);
    if(speed==0){clearTimeout("timer");return;}
    var leftTime = conversion.secondsTotime(Math.round((fSize-upSize)/speed));
    speed = conversion.bytesTosize(speed)+"/s";
    document.querySelector(".speed").innerHTML = speed;
    document.querySelector(".left_time").innerHTML = "剩余時(shí)間 | " + leftTime;
    document.querySelector(".upload_percent").innerHTML = perc;
    document.querySelector(".upload_bar").style.width = perc;
    nPreuploaded = upSize;
}

PHP：

"success","url"=>mb_convert_encoding($truename."-".$fsize."/".$fname,"utf-8","gbk"));
    echo json_encode($res);
}

?>

還有一些細(xì)節(jié)的js這里沒(méi)給出來(lái)，主要就上面的功能，有問(wèn)題的話歡迎回復(fù)，樓主只是個(gè)新手，不足之處請(qǐng)大家多多見(jiàn)諒。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/21019.html

相關(guān)文章

  • 分片上傳與斷點(diǎn)續(xù)傳解決方案

    摘要：所以，該文適合于全棧工程師，至少是想成為還有，為什么需要分片，不分片能實(shí)現(xiàn)斷點(diǎn)續(xù)傳嗎分片是為了充分利用網(wǎng)絡(luò)帶寬，加快上傳速度不分片也是能夠?qū)崿F(xiàn)斷點(diǎn)續(xù)傳的。詳細(xì)參考文件上傳組件深度剖析分片上傳與斷點(diǎn)續(xù)傳之間沒(méi)有很直接的關(guān)系好了，進(jìn)入正題。 上傳文件，基本上是每一個(gè)網(wǎng)站應(yīng)用都會(huì)具備的一個(gè)功能。對(duì)于一個(gè)網(wǎng)絡(luò)存儲(chǔ)應(yīng)用，對(duì)于上傳功能要求更是迫切。 如今市面上成熟上傳插件，如WebUpload...

    includecmath 評(píng)論0 收藏0

  • html5文件上傳斷點(diǎn)續(xù)傳

    摘要：最近公司要做一個(gè)上傳的插件，要在下先實(shí)現(xiàn)功能，要求顯示上傳進(jìn)度，文件信息，斷點(diǎn)續(xù)傳等等。我一看，艾瑪，沒(méi)做過(guò)啊。沒(méi)辦法，，只能去查資料了。作為一名還未畢業(yè)的大學(xué)僧，本人表示亞歷山大。不過(guò)還好是做出來(lái)了，不敢說(shuō)代碼寫(xiě)得很好，大家將就著看吧。 最近公司要做一個(gè)html5上傳的jquery插件，要在下先實(shí)現(xiàn)功能，要求顯示上傳進(jìn)度，文件信息，斷點(diǎn)續(xù)傳等等。我一看，艾瑪！Σ(?д?lll)，沒(méi)做...

    tianlai 評(píng)論0 收藏0

  • Android Okhttp 斷點(diǎn)續(xù)傳面試解析

    摘要：怎么支持?jǐn)帱c(diǎn)續(xù)傳的協(xié)議中默認(rèn)支持獲取文件的部分內(nèi)容，這其中主要是通過(guò)頭部的兩個(gè)參數(shù)和來(lái)實(shí)現(xiàn)的。我們?cè)谒⒁幌旅嬖囶}的時(shí)候，有時(shí)候會(huì)看到一些大廠會(huì)問(wèn)關(guān)于斷點(diǎn)續(xù)傳的原理，那么今天在這里從 HTTP 斷點(diǎn)續(xù)傳知識(shí)和 Android 中如何實(shí)現(xiàn)斷點(diǎn)續(xù)傳的思路來(lái)做一個(gè)關(guān)于 Android 斷點(diǎn)續(xù)傳原理的總結(jié)。 Http 斷點(diǎn)續(xù)傳知識(shí)點(diǎn) 什么是斷點(diǎn)續(xù)傳 指的是在上傳/下載時(shí)，將任務(wù)（一個(gè)文件或壓縮包）人為...

    ACb0y 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<