Bagaimana untuk Menggunakan `.submit()` dan `.ajax()` jQuery untuk Muat Naik Berbilang Fail Asynchronous?

Menyerahkan Fail melalui AJAX Menggunakan jQuery '.submit()' dan '.ajax()'

Ikhtisar:

Memuat naik berbilang fail ke pelayan adalah keperluan biasa dalam pembangunan web. Kaedah '.submit()' dan '.ajax()' jQuery menyediakan pendekatan yang mudah untuk menyerahkan borang dan menghantar data ke pelayan secara tidak segerak. Artikel ini membincangkan cara menggunakan kaedah ini untuk memudahkan muat naik berbilang fail.

Borang HTML:

Borang HTML hendaklah mengandungi berbilang medan input fail, dan "Tambah Lagi butang Fail", dan butang hantar. Apabila butang "Tambah Lagi Fail" diklik, medan input fail tambahan ditambahkan secara dinamik.

<form enctype="multipart/form-data" action="upload.php" method="post">
    <input name="file[]" type="file">
    <button class="add_more">Add More Files</button>
    <input type="button">

JavaScript untuk Penambahan Input Fail Dinamik:

Kod JavaScript menggunakan jQuery untuk menambah medan input fail tambahan apabila butang "Tambah Lagi Fail" berada diklik.

$(document).ready(function(){
    $('.add_more').click(function(e){
        e.preventDefault();
        $(this).before("<input name='file[]' type='file'>");
    });
});

Muat Naik Skrip:

Skrip PHP sebelah pelayan ('upload.php') mengendalikan proses muat naik fail, termasuk pengesahan dan penyimpanan ke direktori sasaran. Ia menganggap struktur direktori hierarki untuk menyusun fail yang dimuat naik.

for($i=0; $i<count($_FILES['file']['name']); $i++){
    $target_path = "uploads/";
    $ext = explode('.', basename( $_FILES['file']['name'][$i]));
    $target_path = $target_path . md5(uniqid()) . "." . $ext[count($ext)-1]; 

    if(move_uploaded_file($_FILES['file']['tmp_name'][$i], $target_path)) {
        echo "The file has been uploaded successfully <br />";
    } else{
        echo "There was an error uploading the file, please try again! <br />";
    }
}

jQuery untuk Penyerahan Fail AJAX:

Akhir sekali, '.submit()' dan ' Kaedah .ajax()' digunakan untuk mengikat pendengar acara kepada butang hantar. Apabila diklik, permintaan AJAX dihantar ke skrip 'upload.php' dan data fail yang dimuat naik disertakan dalam permintaan menggunakan objek FormData. Fungsi 'kejayaan' jQuery mengendalikan respons pelayan.

$('body').on('click', '#upload', function(e){
    e.preventDefault();
    var formData = new FormData($(this).parents('form')[0]);

    $.ajax({
        url: 'upload.php',
        type: 'POST',
        xhr: function() {
            var myXhr = $.ajaxSettings.xhr();
            return myXhr;
        },
        success: function (data) {
            alert("Data Uploaded: "+data);
        },
        data: formData,
        cache: false,
        contentType: false,
        processData: false
    });
    return false;
});

Dengan melaksanakan pendekatan ini, anda boleh memuat naik berbilang fail secara tidak segerak menggunakan PHP, jQuery dan AJAX dengan berkesan.

Atas ialah kandungan terperinci Bagaimana untuk Menggunakan `.submit()` dan `.ajax()` jQuery untuk Muat Naik Berbilang Fail Asynchronous?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!