Javascript 如何预览上传到数据库的图像？

我尝试了几种不同的方法，使用引导将图像上传到数据库。我的IDE是Visual Studio。我需要的是让上传的图像显示在预览中。虽然我以前看过一个正在运行的演示，但当我运行代码时，照片文件显示在屏幕上，没有预览图像。因此，我不确定图像是否成功存储在数据库中。任何建议都将不胜感激！我已经包含了所有当前代码：

HTML:

---

通过

预览

，您是指图像文件本身，还是指服务器（上传后）生成的thumb？如果是图像，那么您的代码运行良好，请检查我的小提琴：如果是服务器生成的拇指，那么您的代码中没有表单提交或ajax部分。检查回答：我是指缩略图，是的。虽然你的第二条评论确实向我展示了我所需要的内容，但在我添加了导航栏和标题表单后，我选择的代码不再显示缩略图。更新：好的，问题是我在代码末尾加了结尾。一旦我移动了它，缩略图又开始工作了。谢谢你回复我！

  <div>
    <form>
      <div>
        <div class="form-group hirehide is-empty is-fileinput width100">
          <div class=socialmediaside2>
            <input class=fileUpload accept="image/jpeg, image/jpg" name=profilepic[] type=file value="Choose a file">
            <div class=input-group>
              <input class=form-control id=uploadre placeholder="Please select your profile picture" readonly>
              <span class="input-group-btn input-group-sm">
                <button class="btn btn-fab btn-fab-mini"type=button><i class=material-icons>attach_file</i></button>
              </span>
            </div>
          </div>
        </div>
        <div class=upload-demo>
          <div class=upload-demo-wrap><img alt="your image" class=portimg src=#></div>
        </div>
      </div>
    </form>
  </div>

    function readURL() {
      var $input = $(this);
      var $newinput = $(this).parent().parent().parent().find('.portimg');
      if (this.files && this.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            reset($newinput.next('.delbtn'), true);
            $newinput.attr('src', e.target.result).show();
            $newinput.after('<input type="button" class="delbtn removebtn" value="remove">');
        }
        reader.readAsDataURL(this.files[0]);
      }
    }
    $(".fileUpload").change(readURL);
    $("form").on('click', '.delbtn', function (e) {
      reset($(this));
    });

    function reset(elm, prserveFileName) {
      if (elm && elm.length > 0) {
        var $input = elm;
        $input.prev('.portimg').attr('src', '').hide();
        if (!prserveFileName) {
          $($input).parent().parent().parent().find('input.fileUpload').val("");
          //input.fileUpload and input#uploadre both need to empty values for particular div
        }
        elm.remove();
      }
    }

    body {
    img.portimg {
        display: none;
        max-width: 200px;
        max-height: 200px;
    }
    }