kode javascript

Membaca file gambar dalam javascript

Gambar membuat proporsi yang signifikan dari data yang dikirimkan di internet. Seringkali, klien harus mengunggah file gambar dari perangkat mereka ke server. Untuk memastikan pengguna mengunggah file gambar dengan jenis, kualitas, dan ukuran yang benar, sebagian besar aplikasi web memiliki fitur untuk melihat pratinjau gambar

Di lingkungan browser, klien dapat memulai pengunggahan gambar dengan menjelajahi file menggunakan elemen input atau API seret dan lepas. Anda kemudian dapat menggunakan URL API atau FileReader API untuk membaca file gambar dan mempratinjaunya

Meskipun mempratinjau gambar dengan API URL sangat mudah, menggunakan API FileReader dapat menjadi hal yang membingungkan. Oleh karena itu, dalam artikel ini, Anda akan mempelajari cara mempratinjau gambar dalam aplikasi React dengan FileReader API. Kami akan membahas pratinjau gambar tunggal dan batch

Isi

Cara menelusuri file gambar di React

Jika Anda ingin menambahkan fungsionalitas pengunggahan file ke aplikasi web Anda, elemen input bertipe 

  

    Upload images
8 sangat berguna. Ini memungkinkan pengguna untuk memilih satu atau beberapa file dari penyimpanan di komputer atau perangkat seluler mereka

_
Elemen input di atas akan terlihat seperti tombol saat dirender oleh browser. Mengkliknya akan membuka dialog pemilih file bawaan sistem operasi. Pengguna kemudian dapat memilih file gambar untuk diunggah
Elemen input memiliki atribut 
const changeHandler = [e] => {
  const { files } = e.target
  for [let i = 0; i < files.length; i++] {
    const file = files[i]; // OR const file = files.item[i];
  }
}

1 untuk membatasi jenis file. Nilainya berupa string yang terdiri dari penentu tipe file yang dipisahkan dengan koma. Nilai atribut 
const changeHandler = [e] => {
  const { files } = e.target
  for [let i = 0; i < files.length; i++] {
    const file = files[i]; // OR const file = files.item[i];
  }
}

1 adalah 
const changeHandler = [e] => {
  const { files } = e.target
  for [let i = 0; i < files.length; i++] {
    const file = files[i]; // OR const file = files.item[i];
  }
}

3 dalam elemen input di atas. Ini memungkinkan kami untuk menelusuri dan mengunggah gambar dalam format apa pun
Untuk mengupload file gambar dengan format tertentu, Anda dapat membatasi nilai atribut 
const changeHandler = [e] => {
  const { files } = e.target
  for [let i = 0; i < files.length; i++] {
    const file = files[i]; // OR const file = files.item[i];
  }
}

1. Misalnya, menyetel nilainya ke 
const changeHandler = [e] => {
  const { files } = e.target
  for [let i = 0; i < files.length; i++] {
    const file = files[i]; // OR const file = files.item[i];
  }
}

_6 atau 
const changeHandler = [e] => {
  const { files } = e.target
  for [let i = 0; i < files.length; i++] {
    const file = files[i]; // OR const file = files.item[i];
  }
}

7 hanya menerima gambar PNG
Dengan atribut boolean 
const changeHandler = [e] => {
  const { files } = e.target
  for [let i = 0; i < files.length; i++] {
    const file = files[i]; // OR const file = files.item[i];
  }
}

_8 disetel ke 
const changeHandler = [e] => {
  const { files } = e.target
  for [let i = 0; i < files.length; i++] {
    const file = files[i]; // OR const file = files.item[i];
  }
}

9, pengguna dapat memilih beberapa file gambar. Di sisi lain, pengguna hanya dapat menelusuri satu file gambar jika nilainya 
const fileReader = new FileReader[];

fileReader.onchange = [e] => {
   const { result } = e.target;
}

fileReader.readAsDataURL[fileObject];

0. Perlu dicatat bahwa nilai atribut boolean adalah 
const changeHandler = [e] => {
  const { files } = e.target
  for [let i = 0; i < files.length; i++] {
    const file = files[i]; // OR const file = files.item[i];
  }
}

9 jika atribut tersebut ada pada elemen, dan 
const fileReader = new FileReader[];

fileReader.onchange = [e] => {
   const { result } = e.target;
}

fileReader.readAsDataURL[fileObject];

0 jika dihilangkan
Browser mengeluarkan peristiwa 
const fileReader = new FileReader[];

fileReader.onchange = [e] => {
   const { result } = e.target;
}

fileReader.readAsDataURL[fileObject];

_3 setelah pengguna menyelesaikan pemilihan file. Oleh karena itu, Anda harus mendengarkan acara 
const fileReader = new FileReader[];

fileReader.onchange = [e] => {
   const { result } = e.target;
}

fileReader.readAsDataURL[fileObject];

3 pada elemen input. Anda dapat melakukannya seperti itu di Bereaksi
  

    Upload images
    
  



Dalam event handler 
const fileReader = new FileReader[];

fileReader.onchange = [e] => {
   const { result } = e.target;
}

fileReader.readAsDataURL[fileObject];

_3, Anda dapat mengakses objek 
const fileReader = new FileReader[];

fileReader.onchange = [e] => {
   const { result } = e.target;
}

fileReader.readAsDataURL[fileObject];

7. Ini adalah iterable yang entri-entrinya adalah 
const fileReader = new FileReader[];

fileReader.onchange = [e] => {
   const { result } = e.target;
}

fileReader.readAsDataURL[fileObject];

8 objek. Objek 
const fileReader = new FileReader[];

fileReader.onchange = [e] => {
   const { result } = e.target;
}

fileReader.readAsDataURL[fileObject];

_8 berisi metadata hanya-baca seperti nama file, jenis, dan ukuran
const changeHandler = [e] => {
  const { files } = e.target
  for [let i = 0; i < files.length; i++] {
    const file = files[i]; // OR const file = files.item[i];
  }
}

Pengantar API FileReader
FileReader_ API menyediakan antarmuka untuk membaca konten file dari aplikasi web secara asinkron
Seperti yang disorot di bagian sebelumnya, Anda dapat menggunakan elemen input bertipe 
  

    Upload images
    
  



8 untuk menelusuri file dari komputer atau perangkat seluler pengguna. Memilih file gambar dengan cara ini mengembalikan objek 
const fileReader = new FileReader[];

fileReader.onchange = [e] => {
   const { result } = e.target;
}

fileReader.readAsDataURL[fileObject];

_7 yang entri-entrinya adalah objek 
const fileReader = new FileReader[];

fileReader.onchange = [e] => {
   const { result } = e.target;
}

fileReader.readAsDataURL[fileObject];

8
API FileReader kemudian menggunakan objek 
const fileReader = new FileReader[];

fileReader.onchange = [e] => {
   const { result } = e.target;
}

fileReader.readAsDataURL[fileObject];

8 untuk membaca file yang telah dipilih pengguna secara asinkron. Perlu disebutkan bahwa Anda tidak dapat menggunakan FileReader API untuk membaca konten file dari sistem file pengguna menggunakan nama jalur file
FileReader_ API memiliki beberapa metode instance asinkron untuk melakukan operasi baca. Cara-cara tersebut antara lain