如何预览上传到数据库的图片?

时间:2017-04-12 01:12:24

标签: javascript html css

我已尝试使用Bootstrap将图像上传到数据库的几种不同方法。我的IDE是Visual Studio。我需要的是让上传的图像出现在预览中。虽然我之前看过一个工作演示,但是当我运行我的代码时,照片文件会显示在屏幕上而没有预览图像。因此,我不确定图像是否成功存储在数据库中。任何建议将非常感谢!我已经包含了所有当前代码:

HTML:

  <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>

JavaScript的:

    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();
      }
    }

CSS:

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

0 个答案:

没有答案