Bagaimanakah saya boleh Memuat naik Blob dalam JavaScript?

Memuat naik Gumpalan dengan JavaScript

Apabila berurusan dengan audio atau data multimedia lain dalam JavaScript, adalah perkara biasa untuk menemui gumpalan, yang merupakan koleksi yang tidak boleh diubah data mentah. Untuk menyimpan atau memproses data ini dengan berkesan, anda mungkin perlu memuat naiknya ke pelayan. Berikut ialah panduan terperinci tentang cara memuat naik gumpalan menggunakan JavaScript:

Menggunakan FormData

Salah satu kaedah paling mudah untuk memuat naik gumpalan ialah melalui API FormData. Ia adalah API piawai yang menyediakan cara untuk membuat permintaan HTTP dengan muatan yang mengandungi kedua-dua data bentuk biasa dan data binari, seperti gumpalan.

Pelaksanaan jQuery.ajax

Untuk memuat naik gumpalan menggunakan jQuery.ajax, ikuti langkah berikut:

1. Buat objek FormData baharu:

var fd = new FormData();

2. Tambahkan kedua-dua nama fail dan gumpalan kepada objek FormData:

fd.append('fname', 'test.wav');
fd.append('data', soundBlob);

3. Tetapkan pilihan processData dan contentType bagi panggilan jQuery.ajax kepada false:

$.ajax({
    type: 'POST',
    url: '/upload.php',
    data: fd,
    processData: false,
    contentType: false
}).done(function(data) {
       console.log(data);
});

Oleh menetapkan processData kepada palsu, kami menghalang jQuery daripada menukar objek FormData kepada rentetan, yang diperlukan untuk data binari seperti gumpalan. Begitu juga, menetapkan contentType kepada false membolehkan penyemak imbas menentukan jenis kandungan yang sesuai untuk muat naik.

Pelaksanaan Tersuai

Jika anda lebih suka mencipta objek XHR (XMLHttpRequest) secara manual, anda boleh menggunakan langkah berikut:

1. Mulakan objek XMLHttpRequest baharu:

var xhr = new XMLHttpRequest();

2. Tetapkan kaedah, URL dan pengepala permintaan:

xhr.open('POST', '/upload.php', true);
xhr.setRequestHeader('Accept', 'application/json');

3. Buat objek FormData dan tambahkan data:

var fd = new FormData();
fd.append('fname', 'test.wav');
fd.append('data', soundBlob);

4. Hantar FormData sebagai badan permintaan:

xhr.send(fd);

5. Kendalikan respons pelayan dalam acara onload:

xhr.onload = function() {
    var data = JSON.parse(xhr.responseText);
    console.log(data);
};

Dengan mengikuti langkah ini, anda boleh memuat naik gumpalan ke pelayan dengan cekap menggunakan JavaScript, membolehkan anda untuk memproses dan menyimpan data multimedia dengan berkesan.

Atas ialah kandungan terperinci Bagaimanakah saya boleh Memuat naik Blob dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!