cari

Rumah >hujung hadapan web >tutorial js >Laksanakan kemahiran function_javascript pratonton imej js dengan mudah

Laksanakan kemahiran function_javascript pratonton imej js dengan mudah

WBOY
WBOYasal
2016-05-16 15:19:271159semak imbas

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>

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

Kenyataan：
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 sebelumnya：jQuery melaksanakan pautan berbilang peringkat senarai juntai bawah kotak pertanyaan box_jqueryArtikel seterusnya：jQuery melaksanakan pautan berbilang peringkat senarai juntai bawah kotak pertanyaan box_jquery

Artikel berkaitan

Lihat lagi