本篇內(nèi)容介紹了“h5怎么在網(wǎng)頁中上傳超大文件”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

田家庵網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)公司！從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站設(shè)計(jì)等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營維護(hù)。創(chuàng)新互聯(lián)公司公司2013年成立到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)公司。

利用HTML5分片上傳超大文件

在網(wǎng)頁中直接上傳大文件一直是個比較頭疼的問題，主要面臨的問題一般包括兩類：一是上傳時間長中途一旦出錯會導(dǎo)致前功盡棄；二是服務(wù)端配置復(fù)雜，要考慮接收超大表單和超時問題，如果是托管主機(jī)沒準(zhǔn)還改不了配置，默認(rèn)只能接收小于4MB的附件。

比較理想的方案是能夠把大文件分片，一片一片的傳到服務(wù)端，再由服務(wù)端合并。這么做的好處在于一旦上傳失敗只是損失一個分片而已，不用整個文件重傳，而且每個分片的大小可以控制在4MB以內(nèi)，服務(wù)端不用做任何設(shè)置就可適應(yīng)。

常用的解決方案是RIA，以flex為例，通常是利用FileReference.load方法加載文件得到ByteArray，然后分片構(gòu)造表單（flash的高版本不允許直接訪問文件）。不過這個load方法只能加載較小的文件，大約不超過300MB，因此適用性不是很強(qiáng)。

好在現(xiàn)在有了HTML5，我們可以直接構(gòu)造分片了，這是一個非常喜人的進(jìn)步，只可惜目前適用面不廣（IE啊IE，真是恨你恨得牙癢癢）。

言歸正傳，來看一個DEMO吧，基于ASP.Net MVC3，只是示例，很多問題做了簡化處理。

主要是客戶端，新特性都體現(xiàn)在這里：

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>



    
    
    
    


    
    上傳
    等待

這里的slice方法和FormData都是html5之前不存在的。通過這樣的方法，我們的表單構(gòu)造出來是這樣的，抓包看看：

可以看到構(gòu)造出來的Content-Type是multipart/form-data，也就是符合RFC標(biāo)準(zhǔn)的那個最傳統(tǒng)的文件上傳表單。另外我們同時傳輸?shù)膎ame、total等屬性也都在表單里。

然后是服務(wù)端，沒什么新鮮的，完全是在接收一個普通的文件：

[HttpPost]
public ActionResult Upload()
{
    //從Request中取參數(shù)，注意上傳的文件在Requst.Files中
    string name = Request["name"];
    int total = Convert.ToInt32(Request["total"]);
    int index = Convert.ToInt32(Request["index"]);
    var data = Request.Files["data"];
   
    //保存一個分片到磁盤上
    string dir = Server.MapPath("~/Upload");
    string file = Path.Combine(dir, name + "_" + index);
    data.SaveAs(file);
   
    //如果已經(jīng)是最后一個分片，組合
    //當(dāng)然你也可以用其它方法比如接收每個分片時直接寫到最終文件的相應(yīng)位置上，但要控制好并發(fā)防止文件鎖沖突
    if(index == total)
    {
        file = Path.Combine(dir, name);
        var fs = new FileStream(file, FileMode.Create);
        for(int i = 1;i <= total;++i)
        {
            string part = Path.Combine(dir, name + "_" + i);
            var bytes = System.IO.File.ReadAllBytes(part);
            fs.Write(bytes, 0, bytes.Length);
            bytes = null;
            System.IO.File.Delete(part);
        }
        fs.Close();
    }
   
    //返回是否成功，此處做了簡化處理
    return Json(new { Error = 0 });
}

上面的DEMO很多問題是簡化處理的，比如沒做什么異常處理，客戶端也沒有判斷服務(wù)端是否出錯重試一類的，各位可以自己完善。

在上面的基礎(chǔ)上，我們可以做很多功能上的擴(kuò)展，比如我們可以控制所有分片是順序上傳還是并發(fā)上傳，以適用不同應(yīng)用。再比如我們可以在整體文件上傳前以及分片上傳前都先計(jì)算一下相應(yīng)的HASH，發(fā)個請求詢問服務(wù)器文件是否已存在，如果存在就不要重復(fù)上傳了，這樣就實(shí)現(xiàn)了“極速上傳”以及“斷點(diǎn)續(xù)傳”

“h5怎么在網(wǎng)頁中上傳超大文件”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！