Невозможно просмотреть предварительный просмотр изображения для множественной загрузки и предварительного просмотра - PullRequest
Новая
       12

Невозможно просмотреть предварительный просмотр изображения для множественной загрузки и предварительного просмотра

0 голосов
/ 27 апреля 2018

Я использую загрузку нескольких изображений и предпросмотр для загрузки, но следующий код не работает

HTML 

<form id="mainform" method="post" enctype="multipart/form-data">
<div class="upload-ad-photos">
<label>Photos for your ad :</label>
<input type="file" name="img1" id="img1"><br>
<img id="preview-img1" />
<br>
<div class="clearfix"></div>
<input type="file" name="img1" id="img2"><br>
<img id="preview-img2" />
<br>
</div>
</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 input[type='file']").change(function () {
        readURL(this);
    });

1 Ответ

0 голосов
/ 28 апреля 2018

Попробуйте это ... 

  $(function() {
    // Multiple images preview in browser
    var readURL = function(input) {

        if (input.files) {
            var filesAmount = input.files.length;

            for (i = 0; i < filesAmount; i++) {
                var reader = new FileReader();

                reader.onload = function(event) {
                    $($.parseHTML('<img>')).attr('src', event.target.result).appendTo('#preview-img1');
                }

                reader.readAsDataURL(input.files[i]);
            }
        }

    };
  $("form#mainform div input[type='file']").change(function () {
        readURL(this);
    });
    
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="mainform" method="post" enctype="multipart/form-data">
         <div class="upload-ad-photos">
             <input type="file" name="img1" id="img1" multiple><br>
             <div id="preview-img1"></div>
         </div>
</form>
...