Antarmuka file html5 menggunakan file untuk diunduh di halaman web

Antarmuka file menyediakan informasi yang terkait dengan file dan menjalankan JavaScript di halaman web untuk mengakses konten file.

Objek file berasal dari objek FileList yang dikembalikan oleh pengguna untuk memilih file dengan tag input, dari objek DataTransfer dari Operasi Drag and Drop. Objek file adalah gumpalan khusus yang dapat digunakan dalam konteks apa pun yang dapat digunakan dalam gumpalan.

Untuk menggunakan file di halaman web, objek yang biasanya perlu terlibat adalah: objek file, objek daftar file, objek filereader.

Distist file berasal dari dua tempat, properti file dari elemen input dan drag and drop API (saat file diseret, event.datatransfer.files adalah objek daftar file)

 <Input ID = FileItem Type = File> Var FileList = Document.GetElementById ('FileItem')

Panjang: Atribut ini hanya mengembalikan panjang objek file yang terkandung dalam objek daftar file.

Item (indeks): Dapatkan objek file yang ditentukan dalam posisi yang ditunjuk dalam objek FileList. Itu dapat diberi pengarahan dalam bentuk beberapa indeks array

Masing -masing objek daftar file adalah objek file. Objek file adalah gumpalan khusus.

1.LastModify: Waktu ketika file direvisi, kali ini adalah milidetik yang berlalu pada 0: 0: 00 pada 1 Januari 1970. Itu adalah atribut yang dapat dibaca

2.Name: Nama file file yang dirujuk oleh objek file, yang merupakan atribut yang dapat dibaca

3.Type: Jenis file file yang dirujuk oleh objek file adalah jenis tambang, yang merupakan atribut yang dapat dibaca.

4.SIZE: Ukuran file file yang dirujuk oleh objek file, atribut yang satu ini.

Tidak ada cara untuk mendefinisikan objek file saja, tetapi memiliki cara untuk mewarisi dari objek gumpalan.

Objek FileReader memungkinkan aplikasi web untuk membaca file di komputer pengguna secara tidak sinkron.

Filereader () adalah konstruktor yang dapat membuat objek filereader baru melaluinya.

var filereader = new filereader ();

1.ROR: Mengembalikan kesalahan yang terjadi selama proses membaca.

2.RESULT: Mengembalikan konten file, dan jenisnya layak untuk mengetik atau arraybuffer. Atribut ini legal hanya setelah membaca operasi.

3.ReadyState: Mengembalikan keadaan operasi saat ini.

1.abort (): Operasi baca interupsi. Nilai ReadyState menjadi 2. 2.

2. ReadASArrayBuffer (Blob): Baca gumpalan yang ditentukan, seperti objek file (objek file adalah gumpalan khusus). Selama pembacaan selesai, nilai properti ReadyState akan menjadi 2, dan atribut hasil adalah arraybuffer yang mewakili data file.

3. ReadasDataurl (Blob): Baca gumpalan yang ditentukan, seperti objek file (gumpalan khusus). Selama pembacaan selesai, nilai atribut ReadyState akan menjadi 2. Atribut Hasil adalah URL yang mewakili data file, dan format data adalah string string base64 -Encodeded

 <input type = file onchange = previewFile ()> <br> <img src = height = 200 var preview = document.queeryselector ('img'); File [0]; var reader = new filerereader ();

4. ReadAStext (Boob, Encoding): Baca gumpalan yang ditentukan, seperti objek file (objek file adalah gumpalan khusus). Selama Anda membacanya, nilai properti ReadyState akan menjadi 2, dan atribut hasil adalah string teks yang mewakili data file. Parameter kedua adalah opsional.

1.ABORT: Pengakhiran saat operasi membaca.

2. Kesalahan: dipicu saat membaca operasi selama operasi.

3.Load: dipicu saat membaca operasi dengan sukses.

4.LoadEnd: dipicu di akhir operasi baca. Tidak dapat membaca kesuksesan atau kegagalan.

5.LoadStart: dipicu pada awal operasi baca.

6. Proses: dipicu selama proses membaca.

Menggunakan objek file di HTML5, Anda dapat mengakses file lokal yang dipilih dan membaca konten dalam file -file ini. Objek file berasal dari elemen input atau antarmuka seret dan lepas.

 <input type = file id = input>

Akses file yang dipilih melalui input

 var selectFile = document.getElementById ('input').

Anda hanya dapat memilih satu file pada satu waktu. Pilih beberapa file sekaligus sebelum Gecko 1.9.2.

Untuk antarmuka seret dan lepas, Anda dapat melihat html5 dragevent.

Langkah 1: Buat area penempatan. Elemen biasa, seperti div, p, dll.

Langkah 2: Tambahkan Jatuhkan, Dragenter, Program Pemrosesan Acara Dragover ke area yang ditempatkan. Peran kuncinya adalah program pemrosesan acara drop.

Di bawah ini adalah contoh diagram pendek -pendek:

 <div id = 'dropbox' class = 'dropbox'> </div> .dropbox {border: solid 3px red;

 Var dropbox; Document.getElementById (Dropbox); (E) {E.StopPropagation (); ); i]; );

Di atas adalah antarmuka file HTML5 yang diperkenalkan oleh Xiaobian untuk mengunduh file di halaman web. Saya harap ini akan membantu semua orang. Terima kasih banyak atas dukungan Anda untuk situs web VEVB Wulin!