Bagaimana untuk Menyelesaikan Ralat \'Tiada Sempadan Berbilang Bahagian\' dalam Muat Naik Fail XMLHttpRequest Ajax?

Muat Naik Fail dengan Ajax XMLHttpRequest: Menyelesaikan Ralat "Tiada Sempadan Berbilang Bahagian"

Apabila cuba memuat naik fail menggunakan XMLHttpRequest, anda mungkin menghadapi "Permintaan telah ditolak kerana tiada sempadan berbilang bahagian ditemui" ralat. Untuk menangani isu ini, mari kita teliti kod yang disediakan dan kenal pasti punca yang berpotensi.

Coretan kod berikut bertujuan untuk memuat naik fail menggunakan XMLHttpRequest:

<code class="javascript">var url = "http://localhost:80/...";
$(document).ready(function(){
    document.getElementById('upload').addEventListener('change', function(e) {
        var file = this.files[0];
        var xhr = new XMLHttpRequest();
        // xhr.file = file; // not necessary if you create scopes like this
        xhr.addEventListener('progress', function(e) {
            var done = e.position || e.loaded, total = e.totalSize || e.total;
            console.log('xhr progress: ' + (Math.floor(done/total*1000)/10) + '%');
        }, false);
        if ( xhr.upload ) {
            xhr.upload.onprogress = function(e) {
                var done = e.position || e.loaded, total = e.totalSize || e.total;
                console.log('xhr.upload progress: ' + done + ' / ' + total + ' = ' + (Math.floor(done/total*1000)/10) + '%');
            };
        }
        xhr.onreadystatechange = function(e) {
            if ( 4 == this.readyState ) {
                console.log(['xhr upload complete', e]);
            }
        };
        xhr.open('post', url, true);
        xhr.setRequestHeader("Content-Type", "multipart/form-data");
        xhr.send(file);
    }, false);
});</code>

Untuk menyelesaikan ralat yang disebutkan di atas , dua perkara utama perlu ditangani:

1. Barisan xhr.file = fail; adalah berlebihan dan tidak perlu. Ia tidak diperlukan untuk melampirkan objek fail dengan cara ini.
2. Isu sebenar terletak pada baris xhr.send(file). Untuk memuat naik fail dengan betul, ia perlu dibalut dengan objek FormData, yang akan memformatkannya menjadi objek data POST berbilang bahagian/data borang. Kod yang dikemas kini sepatutnya kelihatan seperti ini:

<code class="javascript">...
var formData = new FormData();
formData.append("thefile", file);
xhr.send(formData);
...</code>

Dengan mencipta objek FormData dan menambahkan fail, anda memastikan data berstruktur dengan betul dan sedia untuk diproses pada pelayan. Fail itu kini boleh diakses dalam $_FILES['thefile'] (jika anda menggunakan PHP di bahagian pelayan), membolehkan anda mengendalikannya dengan sewajarnya.

Merujuk kepada sumber dokumentasi seperti tunjuk cara MDC dan Mozilla boleh memberi tunjuk ajar yang berharga apabila berhadapan dengan isu sebegini.

Atas ialah kandungan terperinci Bagaimana untuk Menyelesaikan Ralat \'Tiada Sempadan Berbilang Bahagian\' dalam Muat Naik Fail XMLHttpRequest Ajax?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!