剛開始學(xué)習(xí)前端開發(fā)就碰到文件上傳問題，還要求可斷點續(xù)傳。查了很多資料，發(fā)現(xiàn)h5的file api剛好可以滿足我們的需求，也遇到了一些問題，于是記錄下來為有同樣需求的朋友提供一些幫助。
一、首先，為了引入文件對象，需要在h5頁面上放置一個file類型的輸入標簽。
<input type="file" onchange="fileinfo()">
當選擇文件之后顯示文件相關(guān)信息：
function fileinfo() {
let fileobj = document.getelementbyid('file').files[0];
console.log(fileobj);
}
我們獲取到的對象本身是一個數(shù)組，這里只選擇了一個文件，需要選擇多個文件可在input標簽添加multiple屬性?，F(xiàn)在我們打開瀏覽器控制臺可以看到輸出了文件的最后修改時間、文件大小和文件名等信息：
// 上傳一塊完成后修改進度條信息，然后上傳下一塊
document.getelementbyid('progress').value = end;
upload(end);
然后打開瀏覽器，在上傳過程中故意關(guān)閉瀏覽器下次再選擇同一文件時即可從斷點位置開始續(xù)傳。
四、雖然已經(jīng)實現(xiàn)了可斷點續(xù)傳的文件上傳功能，但是界面還需要美化一下，這里引用bootstrap框架，需要jquery，順便用jquery的ajax代替原生js的ajax，需要注意的是$.ajax的processdata和contenttype屬性都要設(shè)置成false：
// post表單數(shù)據(jù)
$.ajax({
url: 'upload.php',
type: 'post',
data: fd,
processdata: false,
contenttype: false,
success: function() {
upload(end);
}
});
最后美化完成的效果圖如下：
推薦教程：《js教程》