• Js实现input上传图片并显示缩略图


    用这个方法就可以很方便快捷的实现上传图片并显示缩略图的效果:

    FileReader 的 readAsDataURL()

    先创建一个img标签,再用 fileReader 把input文件的赋值到img的src即可

    具体代码如下:

    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 = "";
      }
    }
    <input type="file" onchange="previewFile()"><br>
    <img src="" height="200" alt="Image preview...">

    查看效果: https://codepen.io/skura23/pen/aWBGBJ

  • 相关阅读:
    hdu 1286
    hdu 1420
    hdu 2068
    hdu 1718
    hdu 1231
    hdu 1072
    HDOJ 350留念
    hdu 1898
    hdu 1593
    帮助理解git的图
  • 原文地址:https://www.cnblogs.com/skura23/p/6767825.html
Copyright © 2020-2023  润新知