1. File API: (File API)
Setiap file yang dipilih oleh Kontrol Formulir Jenis File adalah objek file, dan objek FileList adalah daftar kumpulan objek file ini, mewakili semua file yang dipilih. Objek file mewarisi dari objek gumpalan, yang mewakili data mentah biner dan menyediakan metode irisan untuk mengakses blok data asli di dalam byte. Singkatnya, objek file berisi objek Flielist, dan objek file mewarisi dari objek Blob!
Hubungan atribut yang relevan dari setiap objek:
Antarmuka Filereader:
Seperti yang dapat dilihat dari gambar, HTML5 juga menyediakan antarmuka filereader: digunakan untuk membaca file ke dalam memori dan membaca data dalam file.
var reader = new filereader ();
Ada empat metode dan enam acara secara total untuk antarmuka ini:
• readasBinaryString (file): Baca file sebagai biner
• readasdataurl (file): Baca file dataurl
• readastext (file, [encoding]): baca file sebagai teks
• Tentang (tidak ada): Membaca file interupsi
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
• onabort: dipicu saat membaca interupsi file
• OnError: dipicu saat kesalahan terjadi saat file dibaca
• OnloadStart: dipicu saat membaca file dimulai
• Onprogress: terus memicu saat membaca file
• Onload: dipicu saat file berhasil dibaca
• OnloadEnd: dipicu pada akhir membaca file (baik keberhasilan dan kegagalan dipicu)
Parameter peristiwa di atas e memiliki e.target.Result atau ini. Hasil titik ke hasil baca!
2. Seret dan lepas API:
Atribut Seret dan Jatuhkan: Atur atribut yang dapat ditarik dari elemen yang perlu diseret dan dijatuhkan ke true (dragable = "true")! Elemen IMG dan elemen dapat diseret dan dijatuhkan secara default.
Event Drag and Lop
Acara Seret dan Jatuhkan Elemen:
• Dragstart: dipicu sebelum menyeret
• Seret, pemicu terus menerus sebelum dan sesudah menyeret
• Dragend, drag end memicu
Acara Elemen Target:
• Dragenter, masukkan elemen target untuk memicu
• Dragover, antara memasuki target dan meninggalkan target, memicu terus menerus
• Dragleave, memicu elemen target
• Jatuhkan, lepaskan pemicu mouse pada elemen target
Tetapi! Perlu dicatat bahwa dalam elemen target, perilaku default harus diblokir (Dragover dan Drop ditolak) di acara Dragover dan Drop, jika tidak menyeret dan menjatuhkan tidak dapat diimplementasikan!
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Objek DataTransfer: Ini digunakan secara khusus untuk menyimpan data yang akan dibawa selama drag and drop. Ini dapat ditetapkan sebagai properti DataTransfer dari Acara Drag and Drop.
3 atribut:
• EffectAllowed: Setel gaya kursor (tidak ada, salin, copylink, copymove, tautan, tautan, bergerak, semua dan tidak diinisialisasi)
• Effectallowed: Atur efek visual dari operasi drag and drop
• Jenis: Jenis data yang disimpan, pseudo-array string
• File: Dapatkan file terseret eksternal, kembalikan daftar daftar file, ada atribut jenis di bawah file file, yang mengembalikan jenis file
4 Metode:
• setData (): Atur tombol data dan nilai (harus menjadi string)
• getData (): Dapatkan data, dan dapatkan nilai yang sesuai sesuai dengan nilai kunci.
• clearData (): Hapus data yang disimpan dalam objek DataTransfer
• SetDragimage (ImageUrl, Log X, Long Y): Gunakan elemen IMG untuk mengatur ikon drag and drop
//Contoh:
target.addeventListener ('dragstart', function (e) {
var fs = e.datatransfer.files; // Dapatkan objek Daftar Objek Drag dan Jatuhkan File
var dt = e.datatransfer; // properti DataTransfer sebagai acara drag and drop
dt.effectallowed = 'copy';
dt.setData ('teks/polos', 'halo');
dt.setDragimage (Dragicom, -10, -10);
});
3. Seret dan Jatuhkan Pratinjau Gambar:
Ide:
1. Akrab dengan empat peristiwa dari elemen target yang menyeret file. Catatan: Perilaku default diblokir dalam acara OnDragover dan Ondrop.
2. Setelah menyeret dan menjatuhkan, dapatkan koleksi objek file: e.datatransfer.files
3. Loop setiap objek file dalam koleksi, menilai jenis file dan ukuran file, dan melakukan operasi yang sesuai jika jenisnya ditentukan.
4. Baca Objek Informasi File: FileReader baru (), yang memiliki metode seperti membaca objek file sebagai dataurl: readasdataurl (objek file), peristiwa yang dipicu setelah keberhasilan membaca: acara onload, dll., This.Result adalah data baca
5. Lakukan pemrosesan logis yang sesuai di beberapa peristiwa di objek Filereader
Html:
<div> <p> Harap seret file gambar ke area ini! </p> </div>
Total Count Load: <span id = 'Total'> 100 </span>
JQ:
<type script = "Text /JavaScript"> $ (function () { / *pikiran: *1. Akrab dengan empat peristiwa elemen target dari file target. Ini adalah tipe yang ditentukan*4. ODIV = ". Container"). Get (0); op.html (Harap seret file gambar ke area ini! '); Koleksi Objek File // Cetak Panjang Console.log (fs.length); Console.log (fs [i] .Size); $ ("Total"). HTML (E.Total); oimg.attr ("src", this.result); Mengunggah, AJAX mengirim file, unggah file biner}}}} else {alert ('Harap unggah file gambar!'); </script>Gambar reproduksi:
Ringkasan: Menggabungkan pengetahuan API Event Drag and Lop Anda perlu mengetahui hubungan dan penggunaan suatu objek dan mengklarifikasi ide implementasi!
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.