Memilih dan berinteraksi dengan file di perangkat lokal pengguna adalah salah satu fitur web yang paling umum digunakan. Ini memungkinkan pengguna untuk memilih file dan mengunggahnya ke server, misalnya mengunggah foto, atau mengirimkan dokumen pajak, dll. Namun, itu juga memungkinkan situs untuk membaca dan memanipulasinya tanpa harus mentransfer data melalui jaringan Show
API Akses Sistem File modernFile System Access API menyediakan cara mudah untuk membaca dari dan menulis ke file dan direktori di sistem lokal pengguna. Saat ini tersedia di sebagian besar browser berbasis Chromium seperti Chrome atau Edge. Untuk mempelajarinya lebih lanjut, lihat artikel File System Access API Karena File System Access API belum kompatibel dengan semua browser, lihat browser-fs-access, pustaka pembantu yang menggunakan API baru di mana pun tersedia, tetapi kembali ke pendekatan lawas jika tidak Bekerja dengan file, dengan cara klasikPanduan ini menunjukkan caranya
Pilih fileelemen masukan HTMLCara termudah bagi pengguna untuk memilih file adalah menggunakan elemen 0. Setiap item dalam 0 adalah objek 2
Periksa apakah metode ini merupakan alternatif yang layak untuk kasus penggunaan Anda, karena ini juga memberi Anda pegangan file sehingga Anda dapat menulis kembali ke file, selain membaca. Metode ini bisa Contoh ini memungkinkan pengguna memilih beberapa file menggunakan UI pemilihan file bawaan sistem operasi mereka dan kemudian mencatat setiap file yang dipilih ke konsol Batasi jenis file yang dapat dipilih penggunaDalam beberapa kasus, Anda mungkin ingin membatasi jenis file yang dapat dipilih pengguna. Misalnya, aplikasi pengeditan gambar hanya boleh menerima gambar, bukan file teks. Untuk melakukannya, tambahkan atribut ke elemen input untuk menentukan jenis file mana yang diterima
Seret dan lepas khususDi beberapa browser, elemen Periksa apakah metode ini merupakan alternatif yang layak untuk kasus penggunaan Anda, karena ini juga memberi Anda pegangan file sehingga Anda dapat menulis kembali ke file, selain membaca Pilih zona penurunan AndaPermukaan jatuh Anda bergantung pada desain aplikasi Anda. Anda mungkin hanya ingin sebagian jendela menjadi permukaan jatuh, atau mungkin seluruh jendela Squoosh memungkinkan pengguna untuk menarik dan melepas gambar di mana saja ke dalam jendela, dan mengklik pilih gambar memanggil elemen Tentukan zona penurunanUntuk mengaktifkan elemen menjadi zona seret dan lepas, Anda harus mendengarkan dua peristiwa, 9 dan 0. Peristiwa 9 memperbarui UI browser untuk menunjukkan secara visual bahwa tindakan seret dan lepas membuat salinan file. Acara 0 dipicu setelah pengguna menjatuhkan file ke permukaan. Mirip dengan elemen input, Anda dapat mengakses daftar file dari 3, yang merupakan objek 0. Setiap item dalam 0 adalah objek 2 _ 7 dan 8 menghentikan perilaku default browser dan sebagai gantinya biarkan kode Anda berjalan. Tanpa mereka, browser akan keluar dari halaman Anda dan membuka file yang dimasukkan pengguna ke jendela browserLihat Seret dan lepas khusus untuk demonstrasi langsung Bagaimana dengan direktori?Sayangnya, saat ini tidak ada cara yang baik untuk mengakses direktori Atribut 9 pada elemen <input type="file"> memungkinkan pengguna untuk memilih direktori atau beberapa direktori. Kecuali untuk Firefox untuk AndroidPeriksa apakah metode tersebut merupakan alternatif yang layak untuk kasus penggunaan Anda, karena ini juga memberi Anda pegangan direktori sehingga Anda dapat menulis kembali ke direktori, selain membaca. Metode ini bisa Jika seret-dan-letakkan diaktifkan, pengguna dapat mencoba menyeret direktori ke zona lepas. Ketika acara drop dipecat, itu akan menyertakan objek 2 untuk direktori, tetapi tidak memberikan akses ke file mana pun di dalam direktoriBaca metadata fileObjek 2 berisi metadata tentang file tersebut. Sebagian besar browser menyediakan nama file, ukuran file, dan tipe MIME, meskipun bergantung pada platformnya, browser yang berbeda mungkin memberikan informasi yang berbeda atau tambahan.
Anda dapat melihat ini beraksi di _4 demoMembaca konten fileUntuk membaca file, gunakan _5, yang memungkinkan Anda membaca konten objek 2 ke dalam memori. Anda dapat menginstruksikan _5 untuk membaca file sebagai buffer array, URL data, atau teks
Contoh di atas membaca _2 yang disediakan oleh pengguna, lalu mengubahnya menjadi URL data, dan menggunakan URL data tersebut untuk menampilkan gambar dalam elemen 9. Lihat demo _0 untuk melihat cara memverifikasi bahwa pengguna telah memilih file gambarPantau kemajuan pembacaan fileSaat membaca file besar, mungkin berguna untuk menyediakan beberapa UX untuk menunjukkan seberapa jauh kemajuan pembacaan. Untuk itu, gunakan acara _1 yang disediakan oleh 5. Acara _1 menyediakan dua properti, 4 (jumlah yang dibaca) dan 5 (jumlah yang dibaca)
Bagaimana cara mendapatkan objek file dalam JavaScript?Objek File diwarisi dari Blob dan diperluas dengan kemampuan terkait sistem file. Ada dua cara untuk mendapatkannya. fileParts – adalah larik nilai Blob/BufferSource/String. fileName – string nama file. . Tali ( readAsText ) ArrayBuffer (bacaAsArrayBuffer) URL data, disandikan basis-64 ( readAsDataURL ) Bagaimana cara membuat objek file dari jalur file di javascript?Untuk membuat objek File, gunakan fungsi File atau operator baru . Konstruktor menerima nama jalur penuh atau sebagian, dan mengembalikan objek baru. Urutan CRLF untuk file diprasetel ke default sistem, dan pengkodean diprasetel ke pengkodean sistem default.
Bagaimana cara membaca file dari jalur lokal di javascript?Ada empat metode bawaan di FileReader API untuk membaca file lokal. . bacaAsArrayBuffer(). Membaca isi file input yang ditentukan. . bacaAsBinaryString(). Membaca isi file input yang ditentukan. . bacaAsDataURL(). Membaca isi file input yang ditentukan Bagaimana cara membaca objek file dalam JavaScript?text() API, yang menyediakan metode pembacaan file berbasis janji. Setiap item dalam FileList ( inputElement. files ) adalah turunan dari Blob, artinya kita bisa memanggil. text() pada setiap item dalam FileList untuk membacanya sebagai teks |