masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial js > teks badan

Laksanakan kemahiran function_javascript pratonton imej js dengan mudah

WBOY
Lepaskan： 2016-05-16 15:19:27
asal
1146 orang telah melayarinya

Contoh dalam artikel ini menerangkan kaedah melaksanakan pratonton imej dalam js yang saya tulis sebelumnya. Kod ini agak mudah dan saya ingin berkongsi dengan anda untuk rujukan anda. Butirannya adalah seperti berikut:

1. Pratonton kesan

Rendering:

2. Kod pelaksanaan: 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js图片预览功能</title>
<script language=javascript>
function previewFile() {
 var preview = document.querySelector('img');
 var file  = document.querySelector('input[type=file]').files[0];
 var reader = new FileReader();
 reader.onloadend = function () {
  preview.src = reader.result;
 }
 if (file) {
  reader.readAsDataURL(file);
 } else {
  preview.src = "";
 }
}
</script>
</head>
<body>
<input type="file" onchange="previewFile()"><br>
<img src="" height="200" width="300" alt="Image preview..."/>
</body>
</html>
Salin selepas log masuk

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.

Label berkaitan：
js图片预览 js预览
sumber：php.cn
Artikel sebelumnya：jQuery melaksanakan pautan berbilang peringkat senarai juntai bawah kotak pertanyaan box_jquery Artikel seterusnya：JavaScript tulen berdasarkan pemalam notie.js untuk melaksanakan kemahiran effects_javascript gesaan mesej
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
JavaScript tidak berjalan seperti yang diharapkan Saya cuba membuat htmlcssjs responsif tetapi ia tidak berfungsi seperti yang diharapkan, a...
daripada 2024-04-04 13:05:32
0
1
306
Adakah pelayan akan menghantar lebih daripada 1 imej ke teg <picture> dan akan kembali? Saya ingin tahu tentang tag imej yang dilaksanakan seperti ini. <picture><sources...
daripada 2024-04-03 09:05:59
0
1
290
Bagaimana untuk memusatkan imej yang ditambahkan pada menu menggunakan HTML CSS? Saya cuba membuat menu seperti gambar di bawah: Begini cara saya melakukannya: Bagaimanaka...
daripada 2024-04-01 20:53:26
0
2
264
Bagaimana untuk membenarkan pengguna memuat naik atau menukar imej pada satu halaman dan memaparkannya pada halaman lain? Bagaimana untuk membenarkan pengguna memuat naik gambar pada satu halaman dan kemudian mem...
daripada 2024-04-01 18:33:31
0
1
332
52 imej dalam Array JS Saya sedang belajar Pembantu IT 1 tahun dan pada masa ini kami perlu menulis permainan kad...
daripada 2024-03-30 21:14:49
0
1
272
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan