Large File Upload Techniques and Implementation with Chunked Upload, Base64 Encoding, and FormData

When a business needs to upload extremely large files such as big Excel sheets or media assets, the upload time can become long and unreliable, especially on poor network conditions; users cannot refresh the page and must wait for the request to finish.

The article first reviews common upload methods, then provides concrete examples for each, using PHP on the server side because PHP offers convenient file splitting and merging functions.

1. Ordinary form upload – A standard HTML <form enctype="multipart/form-data"> with a PHP move_uploaded_file handler. This method works but often hits server‑side timeout for very large files.

2. Base64‑encoded upload – The file is read on the client, converted to a Base64 string, and sent to the server where it is decoded and saved. Example code:

var imgURL = URL.createObjectURL(file);
ctx.drawImage(imgURL, 0, 0);
var data = canvas.toDataURL("image/jpeg", 0.5);
// Server side (PHP)
$imgData = $_REQUEST['imgData'];
$base64 = explode(',', $imgData)[1];
$img = base64_decode($base64);
$url = './test.jpg';
if (file_put_contents($url, $img)) {
    exit(json_encode(['url' => $url]));
}

Base64 increases payload size by about 33 % and is therefore inefficient for very large files.

3. Binary upload with FormData – The file is read as binary and appended to a FormData object, which is then posted via axios (or XHR). Example:

let files = e.target.files;
let formData = new FormData();
formData.append('file', file);
axios.post(url, formData);

Older browsers (e.g., IE) cannot send FormData via XHR, so a hidden iframe is used to avoid page navigation. The article shows how to create a temporary iframe, set the form's target to it, and capture the JSON response from the iframe’s document.

function upload() {
    var now = +new Date();
    var id = 'frame' + now;
    $("body").append(`
`);
    var $form = $("#myForm");
    $form.attr({
        "action": "/index.php",
        "method": "post",
        "enctype": "multipart/form-data",
        "target": id
    }).submit();
    $("#"+id).on("load", function(){
        var content = $(this).contents().find("body").text();
        try { var data = JSON.parse(content); } catch(e) { console.log(e); }
    });
}

4. Chunked (slice) upload – To avoid a single long request, the file is split into smaller chunks on the client (using the Blob slice method) and each chunk is uploaded independently. The server stores each chunk and later merges them. The article provides a PHP snippet that concatenates received slices into the final file.

Each chunk carries metadata such as chunk index, chunk MD5, and overall file MD5, enabling the server to verify integrity and support resumable uploads.

5. Resumable upload – Using a library like up6, the client can query which chunks have already been uploaded and only send the missing ones. The server keeps a record of uploaded slices; when the user refreshes or reopens the browser, previously uploaded chunks are not retransmitted.

Additional considerations include slice expiration (clean‑up after a timeout) and handling the final mkfile request that assembles the file.

6. Progress monitoring and pause – XHR's upload.progress event reports per‑chunk progress, and xhr.abort() can pause the upload. Resuming follows the same resumable logic.

Conclusion – While mature SDKs from providers like Qiniu or Tencent Cloud already implement these features, understanding the underlying mechanisms—form submission, Base64 encoding, binary FormData, iframe tricks, chunking, and resumable logic—is valuable for developers who need custom or lightweight solutions.