Javascript ImagePreview

Question

通过<input type="file onchange="readURL(this);">上传图像后，我需要预览图像。

我在互联网上找到了一种解决方案，但这对我不起作用：

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
        };

        reader.readAsDataURL(input.files[0]);
     }
 }

“＃blah”是图像的ID（首先显示一个占位符）。  上传图像后，打开控制台时出现错误：未捕获的ReferenceError：$在FileReader.reader.onload（（index）：156）

中未定义

但它在这里有效：https://codepen.io/mobifreaks/pen/LIbca

请给我一个简短的解释，为什么这对我不起作用及其解决方案。

  function readURL(input) {
      if (input.files && input.files[0]) {
          var reader = new FileReader();
          reader.onload = function (e) {
              $('#preview').attr('src', e.target.result);
          };
          reader.readAsDataURL(input.files[0]);
      }
   }

#preview {
    max-width: 150px;
    max-height: 150px;
}

<input type="file" id="files" name="file" style="margin-left:1px" onchange="readURL(this);"/><br>
<img id="preview" src="" alt=""/>

Answer 1

您必须导入jquery.min.js