cari

Rumah >hujung hadapan web >tutorial js >Bagaimana untuk melaksanakan fungsi pratonton imej melalui js [dengan kod contoh]_kemahiran javascript

Bagaimana untuk melaksanakan fungsi pratonton imej melalui js [dengan kod contoh]_kemahiran javascript

WBOY
WBOYasal
2016-05-16 15:07:131256semak imbas

Kod pelaksanaan: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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>

Pratonton Kesan

Rendering:

Artikel di atas tentang cara melaksanakan fungsi pratonton imej melalui js [dengan kod contoh] adalah semua kandungan yang dikongsi oleh editor saya harap ia dapat memberi rujukan kepada anda, dan saya harap anda akan menyokong Script Home.

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：Penggunaan var yang salah dalam javascript menyebabkan petua undefined_javascriptArtikel seterusnya：Penggunaan var yang salah dalam javascript menyebabkan petua undefined_javascript

Artikel berkaitan

Lihat lagi