input file生成预览图

https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL

<input class='hidden'  onchange="previewFile()" type="file" name="avatar" value="{$user['avatar']}" >
                        <img id="avatar" src="{$user['avatar']}" style="width: 40px;    border-radius: 50px;">

 function previewFile() {
          var preview = document.querySelector('img');
          var file    = document.querySelector('input[type=file]').files[0];
          var reader  = new FileReader();

          reader.addEventListener("load", function () {
            preview.src = reader.result;
          }, false);

          if (file) {
            reader.readAsDataURL(file);
          }
        }