h5在網頁上傳超大文件教學實例
在網頁中直接上傳大檔案一直是個比較頭痛的問題，主要面臨的問題一般都包含兩類：一是上傳時間長中途一旦出錯會導致前功盡棄；二是服務端配置複雜，要考慮接收超大表單和超時問題，如果是託管主機沒準還改不了配置，預設只能接收小於4MB的附件。
比較理想的方案是能夠把大檔案分片，一片一片的傳到服務端，再由服務端合併。這麼做的好處是一旦上傳失敗只是損失一個分片而已，不用整個文件重傳，而且每個分片的大小可以控制在4MB以內，服務端不用做任何設定就可適應。
常用的解決方案是RIA，以flex為例，通常是利用FileReference.load方法載入檔案得到ByteArray，然後分片建構表單（flash的高版本不允許直接存取檔案）。不過這個load方法只能載入較小的文件，大約不超過300MB，因此適用性不是很強。
好在現在有了HTML5，我們可以直接構造分片了，這是一個非常喜人的進步，只可惜目前適用面不廣（IE啊IE，真是恨你恨得牙癢癢）。
言歸正傳，來看一個DEMO吧，基於ASP.Net MVC3，只是範例，很多問題做了簡化處理。
主要是客戶端，新特性都體現在這裡：
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>HTML5大文件分片上传示例</title>
<script src="../Scripts/jquery-1.11.1.min.js"></script>
<script>
var page = {
init: function(){
$("#upload").click($.proxy(this.upload, this));
},
upload: function(){
var file = $("#file")[0].files[0], //文件对象
name = file.name, //文件名
size = file.size, //总大小
succeed = 0;
var shardSize = 2 * 1024 * 1024, //以2MB为一个分片
shardCount = Math.ceil(size / shardSize); //总片数
for(var i = 0;i < shardCount;++i){
//计算每一片的起始与结束位置
var start = i * shardSize,
end = Math.min(size, start + shardSize);
//构造一个表单，FormData是HTML5新增的
var form = new FormData();
form.append("data", file.slice(start,end)); //slice方法用于切出文件的一部分
form.append("name", name);
form.append("total", shardCount); //总片数
form.append("index", i + 1); //当前是第几片
//Ajax提交
$.ajax({
url: "../File/Upload",
type: "POST",
data: form,
async: true, //异步
processData: false, //很重要，告诉jquery不要对form进行处理
contentType: false, //很重要，指定为false才能形成正确的Content-Type
success: function(){
++succeed;
$("#output").text(succeed + " / " + shardCount);
}
});
}
}
};
$(function(){
page.init();
});
</script>
</head>
<body>
<input type="file" id="file" />
<button id="upload">上传</button>
<span id="output" style="font-size:12px">等待</span>
</body>
</html>這裡的slice方法和FormData都是html5之前不存在的。透過這樣的方法，我們的表單建構出來是這樣的，抓包看看：
可以看到建構出來的Content-Type是multipart/form-data，也就是符合RFC標準的那個最傳統的檔案上傳表單。另外我們同時傳輸的name、total等屬性也都在表單裡。
然後是服務端，沒什麼新鮮的，完全是在接收一個普通的檔案：
[HttpPost]
public ActionResult Upload()
{
//从Request中取参数，注意上传的文件在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);
//如果已经是最后一个分片，组合
//当然你也可以用其它方法比如接收每个分片时直接写到最终文件的相应位置上，但要控制好并发防止文件锁冲突
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很多問題是簡化處理的，例如沒做什麼異常處理，客戶端也沒有判斷服務端是否出錯重試一類的，各位可以自己完善。
在上面的基礎上，我們可以做很多功能上的擴展，例如我們可以控制所有分片是順序上傳還是並發上傳，以適用不同應用。再例如我們可以在整體檔案上傳前以及分片上傳前都先計算一下對應的HASH，發個請求詢問伺服器檔案是否已存在，如果存在就不要重複上傳了，這樣就實現了「極速上傳」以及「斷點續傳」
【相關推薦】
#1. 免費h5線上影片教學
##2 . 3.以上是h5在網頁上傳超大文件教學實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
微信檔案過期怎麼恢復 微信的過期檔案能恢復嗎
Feb 22, 2024 pm 02:46 PM
開啟微信，在我中選擇設置，選擇通用後選擇儲存空間，在儲存空間選擇管理，選擇要恢復檔案的對話選擇感嘆號圖示。教學適用型號：iPhone13系統：iOS15.3版本：微信8.0.24解析1先開啟微信，在我的頁面中點選設定選項。 2接著在設定頁面中找到並點選通用選項。 3然後在通用頁面中點選儲存空間。 4接下來在儲存空間頁面中點選管理。 5最後選擇要恢復檔案的對話，點選右側的感嘆號圖示。補充：微信文件一般幾天過期1要是微信接收的文件並沒有點開過的情況下，那在七十二鐘頭之後微信系統會清除掉，要是己經查看了微信
照片無法開啟此文件，因為格式不受支援或文件已損壞
Feb 22, 2024 am 09:49 AM
在Windows系統中，照片應用程式是一個方便的方式來檢視和管理照片和影片。透過這個應用程序，用戶可以輕鬆存取他們的多媒體文件，而無需安裝額外的軟體。然而，有時用戶可能會碰到一些問題，例如在使用照片應用程式時遇到「無法開啟此文件，因為不支援該格式」的錯誤提示，或在嘗試開啟照片或影片時出現文件損壞的問題。這種情況可能會讓使用者感到困惑和不便，需要進行一些調查和修復來解決這些問題。當用戶嘗試在Photos應用程式上開啟照片或影片時，會看到以下錯誤。抱歉，照片無法開啟此文件，因為目前不支援該格式，或該文件
可以刪除Tmp格式檔案嗎？
Feb 24, 2024 pm 04:33 PM
Tmp格式檔案是一種暫存檔案格式，通常由電腦系統或程式在執行過程中產生。這些文件的目的是儲存臨時數據，以幫助程式正常運行或提高效能。一旦程式執行完成或電腦重啟，這些tmp檔案往往就沒有了存在的必要性。所以，對於Tmp格式檔案來說，它們本質上是可以刪除的。而且，刪除這些tmp檔案能夠釋放硬碟空間，確保電腦的正常運作。但是，在刪除Tmp格式檔案之前，我們需
出現0x80004005錯誤代碼怎麼辦 小編教你0x80004005錯誤代碼解決方法
Mar 21, 2024 pm 09:17 PM
在電腦中刪除或解壓縮資料夾，時有時會彈出提示對話框“錯誤0x80004005：未指定錯誤”，如果遇到這中情況應該怎麼解決呢？提示錯誤碼0x80004005的原因其實很多，但大部分因為病毒導致，我們可以重新註冊dll來解決問題，下面，小編給大夥講解0x80004005錯誤代碼處理經驗。有使用者在使用電腦時出現錯誤代碼0X80004005的提示，0x80004005錯誤主要是由於電腦沒有正確註冊某些動態連結庫文件，或電腦與Internet之間存在不允許的HTTPS連接防火牆所引起。那麼如何
斜線和反斜線在檔案路徑中的不同使用
Feb 26, 2024 pm 04:36 PM
檔案路徑是作業系統中用於識別和定位檔案或資料夾的字串。在檔案路徑中，常見的有兩種符號分隔路徑，即正斜線（/）和反斜線（）。這兩個符號在不同的作業系統中有不同的使用方式和意義。正斜線（/）是Unix和Linux系統中常用的路徑分隔符號。在這些系統中，檔案路徑是以根目錄（/）為起始點，每個目錄之間使用正斜線進行分隔。例如，路徑/home/user/Docume
夸克網盤的檔案怎麼轉移到百度網盤？
Mar 14, 2024 pm 02:07 PM
夸克網盤和百度網盤都是現在最常用的儲存文件的網盤軟體，如果想要將夸克網盤內的文件保存到百度網盤，要怎麼操作呢？本期小編整理了夸克網盤電腦端的檔案轉移到百度網盤的教學步驟，一起來看看是怎麼操作吧。 夸克網盤的檔案怎麼存到百度網盤？要將夸克網盤的文件轉移到百度網盤，首先需在夸克網盤下載所需文件，然後在百度網盤用戶端中選擇目標資料夾並開啟。接著，將夸克網盤中下載的檔案拖放到百度網盤用戶端開啟的資料夾中，或使用上傳功能將檔案新增至百度網盤。確保上傳完成後在百度網盤中查看檔案是否已成功轉移。這樣就
hiberfil.sys是什麼檔案？ hiberfil.sys可以刪除嗎？
Mar 15, 2024 am 09:49 AM
最近有很多網友問小編，hiberfil.sys是什麼文件？ hiberfil.sys佔用了大量的C碟空間可以刪除嗎？小編可以告訴大家hiberfil.sys檔是可以刪除的。下面就來看看詳細的內容。 hiberfil.sys是Windows系統中的隱藏文件，也是系統休眠文件。通常儲存在C盤根目錄下，其大小與系統安裝記憶體大小相當。這個檔案在電腦休眠時被使用，其中包含了當前系統的記憶體數據，以便在恢復時快速恢復到先前的狀態。由於其大小與記憶體容量相等，因此它可能會佔用較大的硬碟空間。 hiber
如何在QQ音樂上傳歌詞
Feb 23, 2024 pm 11:45 PM
隨著數位時代的到來，音樂平台成為人們獲取音樂的主要途徑之一。然而，有時候我們在聽歌的時候，發現沒有歌詞是一件十分困擾的事。許多人都希望在聽歌的時候能夠展現歌詞，以便更好地理解歌曲的內容和情感。而QQ音樂作為國內最大的音樂平台之一，也為用戶提供了上傳歌詞的功能，使得用戶可以更好地享受音樂的同時，感受到歌曲的內涵。以下將介紹一下在QQ音樂上如何上傳歌詞。首先
