为什么图片没有变化？

Question

我写了一个函数，可以让我立即在网站上显示上传的图像，但它不起作用。你能帮我告诉我问题是什么或者我做错了什么吗？我会很感激！

我认为问题在于该函数无法识别“this”或类似的东西。

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($) {&nbsp; &nbsp; $(".img-upload").change(function () {&nbsp; &nbsp; &nbsp; var that = $(this)&nbsp; &nbsp; &nbsp; &nbsp; var files = $(this)[0].files&nbsp; &nbsp; &nbsp; &nbsp; if (files != null && files[0] != null) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var reader = new FileReader();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; reader.onload = function (e) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; that.closest('.parent').find('div.img-see-upload').css({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'background-image' :&nbsp; 'url(' + e.target.result + ')'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; reader.readAsDataURL(files[0]);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });});.img-see-upload {&nbsp; height: 600px;&nbsp; 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">&nbsp; &nbsp; <div class="position-absolute m-auto h-100 w-100 center-center" style="left: 0;right: 0;">&nbsp; &nbsp; &nbsp; &nbsp; <div class="tutorial-area center-center bg-white border-0 pointer">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="public/assets/img/upload.png" class="loading-logo">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="file" name="image" class="pointer img-upload"/>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <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($) {&nbsp; &nbsp; $(".img-upload").change(function () {&nbsp; &nbsp; &nbsp; console.log($(this));&nbsp; &nbsp; &nbsp; &nbsp; var input = $(this)[0];&nbsp; &nbsp; &nbsp; &nbsp; if (input.files) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var reader = new FileReader(),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; imgSeeUploadDiv = $(input).closest('.m-3').find('.img-see-upload')[0];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; reader.onload = function (e) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log($(this));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(imgSeeUploadDiv).css({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'background-image' : `url(${e.target.result} )`,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "width": "50px",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "height": "50px"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; reader.readAsDataURL(input.files[0]);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });});需要注意的几点：不需要&nbsp;!= null'this' 在 'reader.onload' 函数中发生变化。必须在元素 css 中添加 'height' 和 'width'。您可以使用“最接近”功能来查找特定的父项

Answer 3

对事件侦听器使用箭头函数，如下所示：reader.onload = (e) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).parent().parent().parent().find('div.img-see-upload').css({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'background-image' : 'url(' + e.target.result + ')'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };或者只是保存实例：var reader = new FileReader();var self = this;reader.onload = function (e) {&nbsp; &nbsp; $(self).parent().parent().parent().find('div.img-see-upload').css({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'background-image' : 'url(' + e.target.result + ')'&nbsp; &nbsp; });};reader.readAsDataURL($(this).files[0]);