javascript - 我选择的图像未出现在预览中

Question

我是 javascript 和 jquery 的新手。问题是：当我选择图像时，它不会立即出现在预览中。我用这段代码部分解决了这个问题：

document.getElementById("id_shield_image").onchange = function () {
            var reader = new FileReader();

            reader.onload = function (e) {
                if($("#parameters_edit_form img").length != 0){

                    $("#parameters_edit_form img").attr('src', e.target.result);
                }
            };

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

现在，该图像仅在有另一个图像出现时才会出现，但如果我第一次这样做，它就不起作用。

这是表单的 HTML：

<div id="main-content" class="col-12">
    <div class="row">
        <div class="col-12">
            <form id="parameters_edit_form" enctype="multipart/form-data" method="POST">
                {% csrf_token %}
                {% bootstrap_form %}
            </form>
        </div>
    </div>
</div>

任何人都可以帮忙吗？提前致谢！

标签： javascriptjquery

Answer 1

根据共享的有限 HTML 进行猜测，您需要在元素不在页面上时创建该元素。

document.getElementById("id_shield_image").onchange = function () {
            var reader = new FileReader();

            reader.onload = function (e) {
                if($("#parameters_edit_form img").length != 0){

                    $("#parameters_edit_form img").attr('src', e.target.result);
                }else{
                    var img = $('<img>');
                    img.attr('src', e.target.result);
                    img.appendTo('#parameters_edit_form');
                }
            };

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