上传前无法查看图像预览

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> 标签，然后分配@987654327 @ 到该图像 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 属性，以便在输入中显示相关预览，请参阅我创建的演示

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