HTML5 File.slice() / Blob.slice() Method ทำอะไร?

สร้าง Blob ใหม่จากช่วง Bytes ของ Blob เดิม

blob.slice(start, end, contentType) คืน Blob ใหม่ที่มีข้อมูลเฉพาะช่วงที่ระบุ

ตัวอย่าง: อ่านไฟล์ใหญ่ทีละ Chunk (Resumable Upload)

var blob = new Blob(['large file content...'], {type: 'text/plain'});
var chunkSize = 1024 * 1024; // 1MB
var start = 0;

function uploadNextChunk() {
    var end = Math.min(start + chunkSize, blob.size);
    var chunk = blob.slice(start, end);
    
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload', true);
    xhr.setRequestHeader('Content-Range', 'bytes ' + start + '-' + (end-1) + '/' + blob.size);
    xhr.onload = function() {
        start = end;
        if (start < blob.size) uploadNextChunk();
        else console.log('Upload complete');
    };
    xhr.send(chunk);
}
uploadNextChunk();

ประโยชน์

• Resumable/Pausable Uploads
• Parallel Chunk Uploads
• ประมวลผลไฟล์ใหญ่ไม่ต้องโหลดทั้งหมดใน RAM