Question

我有一个用户可以上传照片的表单，在提交表单之前，预览了所选照片。

目前，他们还没有，但是无论上传了多少，他们如何让他们在一条线上显示3。因此，如果5上传了第1行的3张照片和第2行的2张照片。

    <div class="container">
<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card card-default">
            <div class="card-header">Advertise Your Property</div>


            <div class="card-body">
                <form method="POST" action="/createadvert" enctype="multipart/form-data">
                    {{ csrf_field() }}
                    <div class="form-group row">
                        <label for="photo" class="col-md-3 col-form-label text-md-right">Images</label>
                        <div class="col-md-9">
                          <input type="file" name="photo" id="myFile" multiple />
                        </div>
                      </div>
                      <div class="form-group row">

                          <div class="form-group row previews">

                        </div>
                      </div>

                      <script>
                      /*=============== Script to preview image in upload form ==============*/

                      $("#myFile").change(function(event) {
                        var $previews = $(".previews").empty();
                        [].forEach.call(this.files, function(file) {
                          var reader = new FileReader();
                          reader.readAsDataURL(file);
                          reader.onloadend = function() {
                            $previews.append(`<div class="col-4"><img src="${this.result}" class="img-fluid"/></div>`);

                          };
                        });
                      });
                      </script>

Answer 1

问题是您要在col-md-12中包装照片，但这不会奏效。您需要将图像直接放在row中。将代码更改为此。

      <div class="form-group row previews">
        <!-- photos dynamically inserted here-->
      </div>

然后将插入的图像更改为：

$previews.append(`<div class="col-4"><img src="${this.result}" class="img-fluid"/></div>`);

上传的图像并排上传

1 个答案: