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($) {
    $(".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

为事件监听器使用箭头功能，如下所示：

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]);

Answer 3

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”函数中发生了变化。
必须在元素css中添加“高度”和“宽度”。
您可以使用'closest'函数来查找特定的父母

图片为什么不改变？

3 个答案: