显示默认图像，直到图像上传到图像持有人

Display default image until image is uploaded in the image holder

本文关键字：图像持有人默认显示更新时间：2023-09-26

我想要一个默认的图像是可见的图像持有人，直到用户没有上传任何图像。这样，当打印出页面时，就可以看到一个演示用户图像。怎么做呢?

//Html Part
<div class="form-group uploader"> <label class="coole">Upload Child's Image:</label>
      <input name="fileToUpload" type="file" id="fileToUpload" /><br />
       <div name="image-holder" id="image-holder"> </div> 
    //Js Part
    <script>
      $("#fileToUpload").on('change', function () {
            if (typeof (FileReader) != "undefined") {
                var image_holder = $("#image-holder");
                image_holder.empty();
                var reader = new FileReader();
                reader.onload = function (e) {
                    $("<img />", {
                        "src": e.target.result,
                        "class": "thumb-image",
                        "width":"113px",
                        "height":"151px"
                    }).appendTo(image_holder);
                }
                image_holder.show();

                reader.readAsDataURL($(this)[0].files[0]);
            } else {
                alert("This browser does not support FileReader.");
            }
        });
      </script>

尝试:

<div class="form-group uploader"> <label class="coole">Upload Child's Image:</label>
  <input name="fileToUpload" type="file" id="fileToUpload" /><br />
   <div name="image-holder" id="image-holder"><img src='path-to-placeholder-img" class="placeholder"/> </div> 
//Js Part
<script>
  $('#image_holder').show();
  $("#fileToUpload").on('change', function () {
        if (typeof (FileReader) != "undefined") {
            var image_holder = $("#image-holder");
            image_holder.empty();
            var reader = new FileReader();
            reader.onload = function (e) {
                $("<img />", {
                    "src": e.target.result,
                    "class": "thumb-image",
                    "width":"113px",
                    "height":"151px"
                }).appendTo(image_holder);
                $('.placeholder').hide();
            }
            reader.readAsDataURL($(this)[0].files[0]);
        } else {
            alert("This browser does not support FileReader.");
        }
    });
  </script>