Artikel ini akan menunjukkan metode untuk mengunggah gambar menggunakan JavaScript dan HTML.
Bagaimana Cara Mengunggah Gambar Sederhana Menggunakan JavaScript/HTML?
Untuk mengunggah gambar sederhana menggunakan JavaScript, pertama-tama kita akan menambahkan tag gambar di halaman HTML, lalu menggunakan kode JavaScript untuk memuat dan memilih gambar ke dalam halaman web.
Untuk implikasi praktis, cobalah instruksi yang disebutkan.
Contoh
Pertama-tama, ikuti instruksi yang diberikan:
- Sisipkan “
” elemen dan tentukan jenis input sebagai “ mengajukan ”. - Jenis 'file' ini menentukan bidang dalam pemilihan file dan ' Jelajahi ” untuk mengunggah file.
- “
” tag menyisipkan jeda baris. - Kemudian, masukkan “
” tag HTML dan tambahkan “ pengenal ” atribut untuk menentukan id unik dengan nama tertentu.
- “ src ” Atribut yang digunakan untuk menambahkan URL file media:
< br >
< img id = 'Gambarku' src = '#' >
Terlihat bahwa opsi file telah dibuat, dan hanya dapat menampilkan nama gambar setelah menerima masukan:
Sekarang, di dalam '
< naskah >
jendela. addEventListener ( 'memuat' , fungsi ( ) {
dokumen. querySelector ( 'masukan[tipe='berkas']' ) . addEventListener ( 'mengubah' , fungsi ( ) {
jika ( ini . file && ini . file [ 0 ] ) {
varimg = dokumen. getElementById ( 'img_content' ) ;
img. memuat = ( ) => {
URL . cabutObjectURL ( img. src ) ;
}
img. src = URL . createObjectURL ( ini . file [ 0 ] ) ;
}
} ) ;
} ) ;
naskah >
Dalam cuplikan kode di atas:
- “ addEventListener() ” Metode JavaScript mengizinkan penyisipan atau penyertaan event handler yang ditentukan ke suatu elemen.
- “ querySelector() ” adalah metode yang digunakan untuk mengembalikan item pertama dalam dokumen tertentu yang tertaut dengan pemilih tertentu.
- “ getElementById() ” metode digunakan untuk mendapatkan elemen dengan menggunakan id yang ditentukan. Untuk tujuan itu, nilai dari dilewatkan sebagai parameter.
- “ cabutObjectURL() ” merilis URL objek yang ada yang dibuat dengan menggunakan URL. Untuk melakukannya, URL gambar diteruskan sebagai parameter metode ini.
- “ buatObjectURL() ” adalah metode statis JavaScript yang membuat string tertentu memiliki URL yang mewakili objek yang diteruskan dalam parameter.
Keluaran
Terlihat bahwa kami telah berhasil mengunggah gambar sederhana.
Kesimpulan
Untuk mengunggah gambar sederhana menggunakan JavaScript, gunakan tombol “ addEventListener() ” metode yang mengizinkan penyisipan atau pelekatan event handler yang ditentukan ke suatu elemen. Kemudian, akses elemen yang ditentukan oleh id dan gunakan tombol “ cabutObjectURL() ' Dan ' buatObjectURL() metode. Posting ini menyatakan metode pengunggahan gambar sederhana menggunakan JavaScript/HTML.