上传前无法查看图片预览

Question

我正在使用关注代码上传图片并在上传前显示预览。但我无法查看预览。有人可以找到我犯错的地方

HTML

       <form action="#" id="mainpost">
                            <fieldset>
                                <div class="section postdetails">
                                    <div class="row form-group add-image">
                                        <label class="col-sm-3 label-title">Photos for your ad <span>(This will be your cover photo )</span> </label>
                                        <div class="col-sm-9">
                                            <h5><i class="flaticon-upload" aria-hidden="true"></i>Select Files to Upload<span>You can add multiple images.</span></h5>
                                            <div class="upload-section">
                                                <label class="upload-image" for="img1" id="preview-img1">
                                                    <input type="file" name="img1" id="img1">
                                                </label>                                        

                                                <label class="upload-image" for="img2" id="preview-img2">
                                                    <input type="file" name="img2" id="upload-image-two">
                                                </label>                                            
                                                <label class="upload-image" for="img3" id="preview-img3">
                                                    <input type="file" name="img3" id="upload-image-three" >
                                                </label>                                        

                                                <label class="upload-image" for="img4" id="preview-img4">
                                                    <input type="file" name="img4" id="upload-imagefour">
                                                </label>
                                            </div>  
                                        </div>
                                    </div>

                                </div><!-- section -->
                                </fieldset>
                        </form><!-- form -->    

脚本

function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                imgId = '#preview-' + $(input).attr('id');
                $(imgId).attr('src', e.target.result);
            };
            reader.readAsDataURL(input.files[0]);
        }
    }
    $("form#mainform div.upload-image input[type='file']").change(function () {
        readURL(this);
    });

Answer 1

主要是2个错误

imgId = '#preview-' + $(input).attr('id');
$(imgId).attr('src', e.target.result);

首先，您尝试将src属性分配给label而不是img代码，<label class="upload-image" for="img1" id="preview-img1">您应该在每个内添加<img>代码在输入后标记，然后将src分配给该图像，您已分配给标签的id将其分配给图像，而不是<img class="upload-image" id="preview-img1" src="" />。

然后您选择了错误的表单form#mainform和错误的元素div.upload-image

$("form#mainform div.upload-image input[type='file']")

建议更改后

应如下所示

$("form#mainpost label input[type='file']")

然后您选择id来检测预览元素imgId = '#preview-' + $(input).attr('id');，而您应该选择name属性，以便相对于输入显示相关预览，请参阅eblow我创建了一个演示

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

$("form#mainpost label input[type='file']").on('change', function() {
  readURL(this);
});

img.upload-image {
  max-width: 100px;
  max-height: 100px;
  overflow: hidden;
}

label {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" id="mainpost">
  <fieldset>
    <div class="section postdetails">
      <div class="row form-group add-image">
        <label class="col-sm-3 label-title">Photos for your ad <span>(This will be your cover photo )</span> </label>
        <div class="col-sm-9">
          <h5><i class="flaticon-upload" aria-hidden="true"></i>Select Files to Upload<span>You can add multiple images.</span></h5>
          <div class="upload-section">
            <label for="img1">
            
                                                   <input type="file" name="img1" id="upload-image-one"><img class="upload-image" id="preview-img1" src="" />
                                                </label>

            <label for="img2">
            
                                                    <input type="file" name="img2" id="upload-image-two"><img class="upload-image" id="preview-img2"/>
                                                </label>
            <label classfor="img3">
            
                                                    <input type="file" name="img3" id="upload-image-three" ><img class="upload-image" id="preview-img3"/>
                                                </label>

            <label for="img4">
            
                                                    <input type="file" name="img4" id="upload-image-four"><img id="preview-img4"  class="upload-image" id="preview-img4"/>
                                                </label>
          </div>
        </div>
      </div>

    </div>
    <!-- section -->
  </fieldset>
</form>
<!-- form -->

EDIT

因为你不想要或不能改变html你必须手动创建一个图像元素并插入标签内

function readURL(input) {
  //console.log('here', input);
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function(e) {
      imgId = '#preview-' + $(input).attr('name');
      let img = document.createElement('img');
      img.setAttribute('src', e.target.result);
      img.setAttribute('class', 'img-preview');
      document.querySelector(imgId).appendChild(img);
      //console.log(imgId)
      //$(imgId).append('src', e.target.result);
    };
    reader.readAsDataURL(input.files[0]);
  }
}

$("form#mainpost label input[type='file']").on('change', function() {
  readURL(this);
});

img.img-preview {
  max-width: 100px;
  max-height: 100px;
  overflow: hidden;
}

label {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" id="mainpost">
  <fieldset>
    <div class="section postdetails">
      <div class="row form-group add-image">
        <label class="col-sm-3 label-title">Photos for your ad <span>(This will be your cover photo )</span> </label>
        <div class="col-sm-9">
          <h5><i class="flaticon-upload" aria-hidden="true"></i>Select Files to Upload<span>You can add multiple images.</span></h5>
          <div class="upload-section">
            <label class="upload-image" for="img1" id="preview-img1">
                                                    <input type="file" name="img1" id="img1">
                                                </label>

            <label class="upload-image" for="img2" id="preview-img2">
                                                    <input type="file" name="img2" id="upload-image-two">
                                                </label>
            <label class="upload-image" for="img3" id="preview-img3">
                                                    <input type="file" name="img3" id="upload-image-three" >
                                                </label>

            <label class="upload-image" for="img4" id="preview-img4">
                                                    <input type="file" name="img4" id="upload-imagefour">
                                                </label>
          </div>
        </div>
      </div>

    </div>
    <!-- section -->
  </fieldset>
</form>
<!-- form -->