jQuery实现本地input选择图片实时显示

• 2019 年 11 月 13 日
• 筆記

在写图片上传功能时，如果可以实时预览就好了，我们可以通过 jQuery 实现这一效果。

为了更加美观，可以结合我之前写的一篇文章，给图片显示区域设置一个默认图片：HTML img src图片路径不存在，则显示一张默认图片的方法

HTML代码如下：

<p>      <img class="img" src="" onerror="this.src='img/default.png'" width="100" height="100">  </p>  <input class="select" type="file">

效果如下图：

JS代码：

当 input 按钮改变时，给 img 设置 src

<script>      $('.select').change(function(e) {          var _URL = window.URL || window.webkitURL;          var file, img;          if ((file = this.files[0])) {              img = new Image();              img.onload = function() {                  $('.img').attr('src', this.src);              };              img.src = _URL.createObjectURL(file);          }      })  </script>

效果如下图：