Rumah >hujung hadapan web >tutorial js >Bagaimana Menggunakan AJAX dan FormData untuk Muat Naik Fail?

Bagaimana Menggunakan AJAX dan FormData untuk Muat Naik Fail?

Susan Sarandon
Susan Sarandonasal
2024-12-16 08:45:10683semak imbas

How to Use AJAX and FormData for File Uploads?

Muat Naik Fail AJAX dengan FormData

Dalam konteks HTML dinamik, anda telah menghasilkan borang muat naik fail melalui drag-and-drop dan mempunyai kod JavaScript untuk menyerahkan borang menggunakan AJAX. Walau bagaimanapun, untuk memudahkan muat naik fail menggunakan FormData, anda memerlukan pelarasan.

Persediaan

Untuk menggunakan FormData, pilih salah satu daripada yang berikut:

  • Bekalkan keseluruhan borang untuk pemprosesan:
var form = $('form')[0];
var formData = new FormData(form);
  • Nyatakan data tepat untuk FormData:
var formData = new FormData();
formData.append('section', 'general');
formData.append('action', 'previewImg');
// Attach file
formData.append('image', $('input[type=file]')[0].files[0]);

Menghantar Borang

Gunakan coretan jQuery yang disediakan:

$.ajax({
    url: 'Your url here',
    data: formData,
    type: 'POST',
    contentType: false,
    processData: false,
    // ... Other options like success and etc
});

Permintaan ini akan meniru penyerahan borang biasa dengan enctype="multipart/form-data", membolehkan anda memuat naik fail dengan jayanya.

Nota: Ingat untuk menyatakan jenis: "POST" dalam pilihan, sebagai muat naik fail memerlukan permintaan POST.

Kemas kini: Bermula dengan jQuery 1.6, contentType: false disokong.

Atas ialah kandungan terperinci Bagaimana Menggunakan AJAX dan FormData untuk Muat Naik Fail?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn