html5批量文件上傳

1. 大文件如何快速上傳

在互聯網時代，文件上傳成為了一項常見的需求，尤其在用戶頭像上傳、媒體文件分享和個性業務應用中。起初，我基於uploadify框架開發了一個HTML5版文件上傳插件，該插件受到了用戶和項目的廣泛好評，適用於多種上傳需求。然而，面對大文件上傳時，傳統方法存在的問題愈發明顯，如上傳速度受限、中途斷開需重傳等，使得用戶體驗大打折扣。

斷點續傳技術的引入，旨在解決大文件上傳過程中因網路中斷或誤操作導致的上傳失敗問題，提升用戶體驗。傳統的上傳方式，如利用表單提交文件或HTML5的FormData介面，都是將文件一次性提交至伺服器，伺服器端再進行文件處理。這種方式無法實時保存文件上傳進度，且無法保持瀏覽器與伺服器的長連接以支持文件流上傳，因此，斷點續傳成為必要。

實現斷點續傳的核心技術要點包括：文件分割、文件上傳前獲取已上傳大小、上傳完成後更新已上傳大小記錄、確保客戶端與伺服器端文件唯一性。通過借鑒經驗，我將這些技術應用至Huploadify插件中，實現了斷點續傳功能，為用戶提供更穩定的上傳體驗。

斷點續傳工作原理可分為三步：首先，獲取文件大小並分割文件；其次，將分割的文件片按順序上傳至伺服器，伺服器端追加文件內容；最後，直至文件大小達到文件總大小，上傳過程結束。HTML5的Blob數據類型及其slice()方法在文件分割中起到了關鍵作用，通過該方法可以截取文件的任意部分。文件片的保存與追加通過後台編程實現，PHP作為示例語言，可以利用file_get_contents和file_put_contents來完成文件的讀取與追加操作。同時，實時保存已上傳文件大小是實現斷點續傳的關鍵步驟，通常通過localStorage或後台資料庫來實現，確保用戶在不同頁面或不同會話中上傳文件時，能夠准確記錄已上傳部分，避免重復上傳。

在服務端保存數據是實現可靠上傳的重要環節，涉及文件匹配、大小比較等邏輯。通過傳遞文件名和最後修改時間等信息，服務端能夠精準定位文件位置，確保數據的准確性和安全性。項目中使用資料庫來記錄已上傳文件信息，以便在斷點續傳過程中快速查找和追加文件內容。在上傳過程中，後台需要處理接收到的文件名和最後修改時間，通過比較與前台請求信息的一致性，確保上傳過程的正確性。

斷點續傳功能的實現，需要細致考慮各種上傳場景和系統兼容性，包括多賬戶上傳同一文件、文件內容修改後的上傳、多按鈕上傳同一文件等。服務端需具備強大的數據處理能力，以確保在復雜的系統環境中正確處理上傳請求。此外，插件提供了多種配置選項，允許開發者根據需求靈活調整上傳策略，如斷點續傳功能的啟用與禁用。通過提供豐富的API介面和示例代碼，Huploadify插件為開發者提供了便捷的集成與優化途徑。

該版本的Huploadify插件在功能和性能上進行了優化，包括增加回調函數、事件支持、文件刪除功能、文件格式過濾等功能，同時支持文件選擇、文件夾選擇和粘貼操作。通過完善input file組件的accept屬性，插件能更好地適應用戶的文件瀏覽需求。此外，插件對外提供了方法調用介面，允許用戶通過JavaScript進行文件上傳、暫停、取消、禁用和啟用等操作，實現了高度的可定製性。在處理已知bug的同時，插件還對斷點續傳功能進行了詳細說明，以確保用戶能夠順利集成和使用。

總結而言，Huploadify插件通過實現斷點續傳功能，顯著提升了大文件上傳的穩定性和用戶體驗。該功能的實現需要跨客戶端和伺服器端的技術合作，包括文件分割、上傳管理、服務端數據處理等多個環節。通過不斷優化和測試，Huploadify插件為開發者提供了一個強大、靈活且易於集成的文件上傳解決方案。在實際應用中，用戶可以期待更流暢、更安全的文件上傳體驗。

2. 如何html5分割上傳實現超大文件無插件網頁上傳

//代碼不支持IE因為IE對HTML5支持不好
$("#file").change(function(event){
varfile=$("#file")[0].files[0];
PostFile(file,0);

});
functionPostFile(file,i){
varname=file.name,//文件名
size=file.size,//總大小shardSize=2*1024*1024,
shardSize=2*1024*1024,//以2MB為一個分片
shardCount=Math.ceil(size/shardSize);//總片數
if(i>=shardCount){
return;
}
//計算每一片的起始與結束位置
varstart=i*shardSize,
end=Math.min(size,start+shardSize);
//構造一個表單，FormData是HTML5新增的
varform=newFormData();
form.append("data",file.slice(start,end));//slice方法用於切出文件的一部分
form.append("lastModified",file.lastModified);//slice方法用於切出文件的一部分
form.append("name",name);
form.append("total",shardCount);//總片數
form.append("index",i+1);//當前是第幾片
//Ajax提交
$.ajax({
url:"/test/AjaxFile",
type:"POST",
data:form,
async:true,//非同步
processData:false,//很重要，告訴jquery不要對form進行處理
contentType:false,//很重要，指定為false才能形成正確的Content-Type
success:function(data){
if(data){
i=data++;
varnum=Math.ceil(i*100/shardCount);
$("#output").text(num+'%');
PostFile(file,i);
}
}
});
}