Question

我有以下代码，动态显示上传的图片，它正常工作。

$(function () {
    $("#fileupload").change(function () {
        if (typeof (FileReader) != "undefined") {
            var preview = $("#preview");
            var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
            $($(this)[0].files).each(function () {
                var file = $(this);
                if (regex.test(file[0].name.toLowerCase())) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        var img = $("<img />");
                        img.attr("style", "height: 180px; width: 180px; margin-left:10px; margin-top: 40px;");
                        img.attr("src", e.target.result);
                        img.attr("id", "imgUserDisplay");
                        preview.append(img);
                        $('#saveImage').on({
                            'click': function () {
                                var photodisplay = $("#photodisplay");
                                var photoimg = $(' <img />');
                                photoimg.attr("style", "height: 180px; width: 180px; margin-top: 40px;cursor:pointer;");
                                photoimg.attr("id", "photoUserDisplay");
                                photoimg.attr("class", "margin");
                                photoimg.attr("data-target", "#commentDiv");
                                photoimg.attr("data-toggle", "modal");
                                photoimg.attr("src", e.target.result);

                                if (!(photoimg.attr("src") == null || photoimg.attr("src") == '')) {
                                    $('#OnlyPost').attr("style", "display:none;");
                                    $('#ImagePost').removeAttr("style");
                                    $('#imgModalDisplay').attr("src", e.target.result);
                                    photodisplay.append(photoimg);
                                    $('#fileupload').val('');
                                    $("#textareaimg").val('');
                                    preview.html("");
                                } else {
                                    alert("Un-handeled Exception Caught");
                                }
                            }
                        });
                    }
                    reader.readAsDataURL(file[0]);
                } else {
                    alert(file[0].name + " is not a valid image file.");
                    preview.html("");
                    return false;
                }
            });
        } else {
            alert("This browser does not support HTML5 FileReader.");
        }
    });
});

HTML

使用此元标记来控制缓存，但仍然没有所需的结果

<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="expires" content="0" />

在此代码中，上传的图像显示在不同的div中，完美运行。问题是该函数在所有div中显示用户上传的图像（缓存问题？），这些图像都附加在同一个数组中。每次调用此特定函数时，有没有办法清除数组（缓存？）？我需要帮助理解语法。如有必要，可以提供HTML。

Answer 1

您的元素共享相同的静态ID

{{1}}

删除它或使其动态化。与多个元素共享相同的ID可能会导致无法预料的行为。

每次点击清除dyanamic数组

1 个答案: