0

I've tried several different ways to upload image to database, using Bootstrap. My IDE is Visual Studio. What I need is to let the uploaded image appear in a preview. Although I've seen a working demo before, when I run my code, the photo file appears on screen without a preview image. Because of this, I'm not sure if the image is stored in database successfully or not. Any advice would be very appreciated! I've included all of the current code:

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;
    }
    }
j08691
  • 190,436
  • 28
  • 232
  • 252
N. Aguirre
  • 1
  • By `preview`, do you mean the image file itself, or thumb generated by server (after the upload)? If it's the image, then your code works well, please check my fiddle: https://jsfiddle.net/cshao/8t24jdy5/ – shaochuancs Apr 12 '17 at 06:53
  • If it is the thumb generated by server, there is no form submission or ajax part in your code. – shaochuancs Apr 12 '17 at 06:54
  • Check out this answer: http://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded – noa-dev Apr 12 '17 at 08:14
  • I meant the thumbnail, yes. While your second comment did show me what I needed, the code I chose stopped showing the thumbnail image after I added the navbar and header form that I have on every page for my website. – N. Aguirre Apr 14 '17 at 02:14
  • Update: Okay, the problem was that I put the closing at the end of the code. Once I moved it, the thumbnail image was working again. Thank you for getting back to me! – N. Aguirre Apr 14 '17 at 03:04

0 Answers0