Contoh kode untuk unggahan batch file dengan drag-and-drop HTML5

Komponen ini diimplementasikan berdasarkan Vue.js. Kerangka UI adalah elementUI. Alamat demo lengkapnya ada di https://github.com/Msxiaoma/upload-folder.

1. Seret dan lepas beberapa folder secara bersamaan
2. Hapus folder tertentu
3. Menampilkan bilah kemajuan unggahan folder saat ini
4. Unggah folder melebihi 5M di beberapa bagian

Efeknya adalah sebagai berikut:

1. Seret dan lepas untuk membaca jalur file di bawah setiap folder
2. Cara menampilkan bilah kemajuan dari folder yang sedang diunggah
3. Membawa cookie melintasi domain saat mengunggah file
4. Fragmentasi folder

Saat melakukan operasi drag-and-drop, objek DataTransfer digunakan untuk menyimpan data yang diseret ke browser melalui tindakan drag-and-drop. Itu dapat menyimpan satu atau lebih data, satu atau lebih tipe data

 // Seret dan letakkan folder dropFolders (e) { e.stopPropagation() e.preventDefault() var items = e.dataTransfer.items for (var i = 0; i < items.length; i++) { var item = items[ i].webkitGetAsEntry() if (item) { this.checkFolders(item) } }}// Tentukan apakah itu folder checkFolders (item) { if (item.isDirectory) { this.traverseFileTree(item) } else { this.$alert('Hanya mendukung pengunggahan folder', 'Prompt', { konfirmasiButtonText: 'OK' }) }}traverseFileTree (item, jalur, parentDir ) { jalur = jalur ||. '' if (item.isFile) { item.file((file) => { biarkan obj = { file: file, jalur: jalur + file.name, attr: item.attr } this.filesList.push(obj) }) } else if (item.isDirectory) { var dirReader = item.createReader() dirReader.readEntries((entries) => { for (biarkan i = 0; i < entri.panjang; i++) { entri[i].attr = item.attr this.traverseFileTree(entri[i], jalur + item.nama + '/', temp) } }, fungsi (e) { console.log(e) }) }}

File tanpa fragmentasi: Berdasarkan jumlah total file dalam folder, hitung persentase setiap file dalam folder. Ketika file berhasil diunggah, ubah proses folder;

File terfragmentasi: Setelah menghitung persentase setiap file dalam file, hitung persentase setiap file dalam file. Setelah setiap file berhasil diunggah, ubah proses folder.

Saat server menyetel header respons

Access-Control-Allow-Origin: Anda harus menentukan nama domain yang jelas dan sesuai dengan halaman web yang diminta, dan tidak boleh *. Akses-Kontrol-Izinkan-Kredensial: benar

Tetapkan header permintaan:

dengan Kredensial: benar

Mengisi kembali:

substr(mulai [, panjang ]) mengembalikan substring dengan panjang yang ditentukan mulai dari posisi yang ditentukan.

mulai: opsi yang diperlukan. Posisi awal substring yang diinginkan. Karakter pertama dalam string memiliki indeks 0.

panjang: opsional. Jumlah karakter yang harus disertakan dalam substring yang dikembalikan.

substring mengembalikan substring yang terletak pada posisi yang ditentukan dalam objek String. Mengembalikan string yang berisi substring dari awal hingga akhir (tidak termasuk akhir).

start: Menunjukkan posisi awal substring, dan indeks dimulai dari 0.

end: menunjukkan posisi akhir substring, indeks dimulai dari 0.

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.