Community Learn Tools Library Leisure

English

Home > Web Front-end > JS Tutorial > Easily implement js image preview function_javascript skills

Easily implement js image preview function_javascript skills

WBOY

Release： 2016-05-16 15:19:27

Original

1165 people have browsed it

The example in this article describes the method of implementing image preview in js. I wrote one before. The code is relatively simple and I would like to share it with you for your reference. The details are as follows:

1. Effect preview

Rendering:

2. Implementation code:

<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>

Copy after login

I hope this article will be helpful to everyone’s JavaScript programming design.

Related labels：

js图片预览 js预览

source：php.cn

Previous article：jQuery implements multi-level linkage drop-down list query box_jquery Next article：Pure JavaScript based on notie.js plug-in to implement message prompt effects_javascript skills

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn