Очистить дианамический массив при каждом нажатии

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, которые добавляются в один массив. Есть ли способ очистить массив (кеш?) Каждый раз, когда вы вызываете эту конкретную функцию? Мне нужна помощь в понимании синтаксиса. При необходимости может быть предоставлен HTML.

Answer 1

Ваши элементы имеют одинаковые идентификаторы статических

    img.attr("id", "imgUserDisplay"); 

удалить его или сделать его динамичным, а также. Совместное использование одного и того же идентификатора с несколькими элементами может привести к непредвиденному поведению.