html5超大文件上傳如何實現(xiàn)？

后端code

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

?php

class Upload{

private $filepath = './upload'; //上傳目錄

private $tmpPath; //PHP文件臨時目錄

private $blobNum; //第幾個文件塊

private $totalBlobNum; //文件塊總數(shù)

private $fileName; //文件名

private $md5FileName;

public function __construct($tmpPath,$blobNum,$totalBlobNum,$fileName, $md5FileName){

$this-tmpPath = $tmpPath;

$this-blobNum = $blobNum;

$this-totalBlobNum = $totalBlobNum;

$this-fileName = $this-createName($fileName, $md5FileName);

$this-moveFile();

$this-fileMerge();

}

前端上傳大型文件或超長數(shù)據(jù)的解決辦法

我們設計的上傳文件大約在500m左右

我第一反應是blob，在HTML5中添加了blob類型用來定義前端較大數(shù)據(jù)，之前使用過blob流傳輸視頻再使用html5中video標簽讀取blob流，所以blob可以作為這種文件傳輸?shù)妮d體，那如何提交呢，使用可formdata提交blob數(shù)據(jù)，這種方式可以承受較大數(shù)據(jù)量的文件，但在使用formdata傳輸?shù)倪^程中，瀏覽器會卡死，無法操作。

還是舍友提醒，可采用數(shù)據(jù)分割的方式，一部分一部分上傳。后經百度得知，文件分割要防止數(shù)據(jù)丟失進行大小校驗，以及防止外部入侵，進行分段前端加密，后端校驗。

百度發(fā)布了一款分割上傳的組件web upload，可包含文件分割，大小校驗等功能。

網(wǎng)站為：

佩服我們大學宿舍的技術氛圍，出差回來的火車上跟大學舍友在微信上聊了兩三個小時的技術，，，那天剛好是大學生開學那幾天，路上好多大學生，好懷念自己的大學生活，好懷念與大學舍友談天說地或技術探討到深夜的日子

說了幾個前端的問題，總結記錄一下吧

其中只有一個我會的，，，先說這個問題，其他的我學習完再分享，留坑。。。。。。

如何html5分割上傳實現(xiàn)超大文件無插件網(wǎng)頁上傳

//代碼不支持IE 因為IE對HTML5支持不好$("#file").change(function(event) { var file = $("#file")[0].files[0]; PostFile(file,0); });function PostFile(file,i){ var name = file.name, //文件名 size = file.size, //總大小shardSize = 2 * 1024 * 1024, shardSize = 2 * 1024 * 1024,//以2MB為一個分片 shardCount = Math.ceil(size / shardSize); //總片數(shù) if(i = shardCount){ return; } //計算每一片的起始與結束位置 var start = i * shardSize, end = Math.min(size, start + shardSize); //構造一個表單，F(xiàn)ormData是HTML5新增的 var form = new FormData(); form.append("data", file.slice(start,end)); //slice方法用于切出文件的一部分 form.append("lastModified", file.lastModified); //slice方法用于切出文件的一部分 form.append("name", name); form.append("total", shardCount); //總片數(shù) 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++; var num = Math.ceil(i*100 / shardCount); $("#output").text(num+'%'); PostFile(file,i); } } }); }

怎樣用html5實現(xiàn)拖拽上傳文件

，首先要判斷拖入的文件是否符合要求，包括圖片類型、大小等，然后獲取本地圖片信息，實現(xiàn)預覽，最后上傳。

$(function(){

...接上部分

var box = document.getElementById('drop_area'); //拖拽區(qū)域

box.addEventListener("drop",function(e){

e.preventDefault(); //取消默認瀏覽器拖拽效果

var fileList = e.dataTransfer.files; //獲取文件對象

//檢測是否是拖拽文件到頁面的操作

if(fileList.length == 0){

return false;

}

//檢測文件是不是圖片

if(fileList[0].type.indexOf('image') === -1){

alert("您拖的不是圖片！");

return false;

}

//拖拉圖片到瀏覽器，可以實現(xiàn)預覽功能

var img = window.webkitURL.createObjectURL(fileList[0]);

var filename = fileList[0].name; //圖片名稱

var filesize = Math.floor((fileList[0].size)/1024);

if(filesize500){

alert("上傳大小不能超過500K.");

return false;

}

var str = "img src='"+img+"'p圖片名稱："+filename+"/pp大?。?+filesize+"KB/p";

$("#preview").html(str);

//上傳

xhr = new XMLHttpRequest();

xhr.open("post", "upload.php", true);

xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");

var fd = new FormData();

fd.append('mypic', fileList[0]);

xhr.send(fd);

},false);

});