Почему картинки не меняются?

Question

Я написал функцию, которая позволяет немедленно отображать загруженное изображение на веб-сайте, но она не работает. Не могли бы вы помочь мне и сказать мне, в чем проблема или что я делаю не так? Я был бы очень признателен!

Мне кажется, проблема в том, что функция не распознает «это» или что-то в этом роде.

jQuery(document).ready(function($) {
    $(".img-upload").change(function () {
        if ($(this).files != null && $(this).files[0] != null) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $(this).parent().parent().parent().find('div.img-see-upload').css({
                    'background-image' : 'url(' + e.target.result + ')'
                });
            };

            reader.readAsDataURL($(this).files[0]);
        }
    });
});


<div class="m-3 position-relative">
    <div class="position-absolute m-auto h-100 w-100 center-center" style="left: 0;right: 0;">
        <div class="tutorial-area center-center bg-white border-0 pointer">
            <button>
                <img src="public/assets/img/upload.png" class="loading-logo">
            </button>
            <input type="file" name="image" class="pointer img-upload"/>
        </div>
    </div>
    <div class="img-see-upload background-image-kochstream background-cover" style="background-image: url(public/assets/img/kochen.jpg)"></div>
</div>

Answer 1

В написанном вами коде много ошибок

{$ (this) .parent (). Parent (). Parent ()} - большая ошибка , потому что онаостанавливается с наименьшим изменением

Вам необходимо добавить класс в родительский div и использовать его.

jQuery(document).ready(function($) {
    $(".img-upload").change(function () {
    	var that = $(this)
        var files = $(this)[0].files
        if (files != null && files[0] != null) {
            var reader = new FileReader();
						
            reader.onload = function (e) {
                that.closest('.parent').find('div.img-see-upload').css({
                    'background-image' :  'url(' + e.target.result + ')'
                });
            };

            reader.readAsDataURL(files[0]);
        }
    });
});

.img-see-upload {
  height: 600px;
  width: 600px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="m-3 position-relative parent">
    <div class="position-absolute m-auto h-100 w-100 center-center" style="left: 0;right: 0;">
        <div class="tutorial-area center-center bg-white border-0 pointer">
            <button>
                <img src="public/assets/img/upload.png" class="loading-logo">
            </button>
            <input type="file" name="image" class="pointer img-upload"/>
        </div>
    </div>
    <div class="img-see-upload background-image-kochstream background-cover" style="background-image: url(public/assets/img/kochen.jpg)"></div>
</div>

Answer 2

jQuery(document).ready(function($) {
    $(".img-upload").change(function () {
      console.log($(this));
        var input = $(this)[0];
        if (input.files) {
            var reader = new FileReader(),
              imgSeeUploadDiv = $(input).closest('.m-3').find('.img-see-upload')[0];
            reader.onload = function (e) {
              console.log($(this));
                $(imgSeeUploadDiv).css({
                    'background-image' : `url(${e.target.result} )`,
                    "width": "50px",
                    "height": "50px"
                }
              );
            };
            reader.readAsDataURL(input.files[0]);
        }
    });
});

Несколько замечаний:

• Нет необходимости в != null
• Функция 'this' изменяется внутри 'reader.onload'.
• Необходимо добавить 'height' и 'width' к элементам css.
• Вы можете использовать функцию ' ближайший ', чтобы найти конкретного родителя

Answer 3

Либо используйте функцию стрелки для прослушивателя событий следующим образом:

reader.onload = (e) => {
                $(this).parent().parent().parent().find('div.img-see-upload').css({
                    'background-image' : 'url(' + e.target.result + ')'
                });
            };

ИЛИ просто сохраните экземпляр:

var reader = new FileReader();
var self = this;

reader.onload = function (e) {
    $(self).parent().parent().parent().find('div.img-see-upload').css({
            'background-image' : 'url(' + e.target.result + ')'
    });
};

reader.readAsDataURL($(this).files[0]);