Complete Guide to Uploading Blob Data with JavaScript and jQuery

Technical Background of Blob Data Upload

In modern web development, handling binary data uploads has become a common requirement. Blob (Binary Large Object) objects represent immutable raw data and are widely used in processing multimedia files such as audio, video, and images. Based on practical development scenarios, this article provides an in-depth analysis of efficiently uploading Blob data using JavaScript and jQuery.

Core Application of FormData API

The FormData interface offers a convenient way to construct form data, particularly suitable for file uploads. Below is the complete implementation for uploading Blob using jQuery and FormData:

var formData = new FormData();
formData.append('filename', 'audio_recording.wav');
formData.append('audio_data', audioBlob);

$.ajax({
    method: 'POST',
    url: '/upload_handler.php',
    data: formData,
    processData: false,
    contentType: false,
    success: function(response) {
        console.log('Upload successful:', response);
    },
    error: function(xhr, status, error) {
        console.error('Upload failed:', error);
    }
});

Analysis of Key Configuration Parameters

processData: false prevents jQuery from serializing the transmitted data, preserving the original binary format of FormData.

contentType: false allows the browser to automatically set the appropriate Content-Type header, typically multipart/form-data, which is the standard format for file uploads.

Server-Side Processing Implementation

The PHP server-side needs to correctly parse the uploaded Blob data:

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $filename = $_POST['filename'] ?? 'default.wav';
    $audioData = $_FILES['audio_data']['tmp_name'] ?? null;
    
    if ($audioData && is_uploaded_file($audioData)) {
        $targetPath = 'uploads/' . $filename;
        if (move_uploaded_file($audioData, $targetPath)) {
            echo 'File upload successful: ' . $filename;
        } else {
            http_response_code(500);
            echo 'File save failed';
        }
    } else {
        http_response_code(400);
        echo 'Invalid upload data';
    }
}
?>

Modern Alternative: Fetch API

With the evolution of web standards, the Fetch API provides a more modern alternative:

fetch('/upload_handler.php', {
    method: 'POST',
    body: formData
})
.then(response => {
    if (!response.ok) {
        throw new Error(`Server error: ${response.status}`);
    }
    return response.text();
})
.then(data => {
    console.log('Upload response:', data);
})
.catch(error => {
    console.error('Upload process error:', error);
});

Technical Summary

The core of Blob data upload lies in correctly handling the transmission format of binary data. The combination of FormData API with appropriate jQuery configuration provides a stable and reliable solution. Developers need to pay special attention to content-type settings and corresponding server-side parsing logic to ensure data integrity during transmission.