Wie wird das zuletzt hochgeladene Bild zuletzt auf dem Bildschirm angezeigt?

Question

<script> 
        $(document).ready(function(){ 
         $("#SaveClinicImages_search-panel").html(""); 
         $(".bodyContainerDiv").css('height','60px'); 
         document.getElementById("SaveClinicImages_submitButton").setAttribute("disabled","disabled"); 
         $('#uploadClinicImages-button').addClass('col-sm-1');  
        }); 

        $('#SaveClinicImages_uploadFile').on('change',function(){ 
          var Msg =$('[id^=SaveClinicImages_fileError]').val(); 
          var errorMsg =$('[id^=PracticeSetting_fileError1]').val(); 
          if(this.files[0].size/1024 > 500){ 
           $("#SaveClinicImages_submitButton").attr("disabled","disabled");  
           alert(errorMsg); 
           $(this).val('');         
          }else{        
           var fileUpload = $(this)[0];        
           var regexPNG = new RegExp("([a-zA-Z0-9\s_\\.\-:;()*\+,\/;\-=[\\\]\^_{|}<>~`])+(.png)$"); 
           var regexJPG = new RegExp("([a-zA-Z0-9\s_\\.\-:;()*\+,\/;\-=[\\\]\^_{|}<>~`])+(.jpg)$"); 
           if (regexPNG.test(fileUpload.value.toLowerCase()) || regexJPG.test(fileUpload.value.toLowerCase())) 
           { 
            $('#SaveClinicImages_submitButton').removeAttr('disabled'); 
            return true; 
           } else { 
            $("#SaveClinicImages_submitButton").attr("disabled","disabled"); 
            alert(Msg); 
            $(this).val(''); 
            $(this).focus();            
            return false; 
           } 
          } 

        }); 

        var form = document.forms.namedItem("SaveClinicImages"); 
        form.addEventListener('submit', function(ev) { 
         var oData  = new FormData(form);       
         var oReq = new XMLHttpRequest(); 
         oReq.open("POST", "UploadClinicImages/saveClinicImages", false); 
         oReq.onload = function(oEvent) { 
         if (oReq.status == 200) {               
          var data=oReq.responseText; 
          var jsonResponse = JSON.parse(data); 
          var newImageCount = parseInt($('#PracticeSetting_addedImageCount').val())+1; 
          $('#PracticeSetting_addedImageCount').val(newImageCount); 


          if(parseInt(newImageCount) >= 5){ 
           $('#PracticeSetting_addclinicImages_div').hide(); 
          } 

          for (var i=0; i < jsonResponse.length; i++){ 
           if(jsonResponse[i].newAdded == 'Y'){ 
            if(parseInt(jsonResponse[i].rowIndex) > 6){ 
             newImageCount = jsonResponse[i].rowIndex; 
            } 
            addImageDiv(jsonResponse[i].relativePath,jsonResponse[i].rowIndex,parseInt(newImageCount)-1,jsonResponse[i].documentId,jsonResponse[i].primaryImage); 
           } 
          }      

          $('[id^=uploadClinicImages]').modal('hide'); 

         } else { 
          alert("Error in adding file!"); 
         } 
         };        
         oReq.send(oData); 
         ev.preventDefault(); 

        }, false); 


        function addImageDiv(relativePath,rowIndex,newImageCount,documentId,primaryImage){ 
         console.log(newImageCount); 
         var rowStr=''; 
         var carouselStr=''; 
         var indicatorStr=''; 
          rowStr = rowStr +'<div class="col-sm-2" data-value="png" id="attachment'+rowIndex+'_display">' 
          +'<a style="color:black;" href="#" class="close" data-value="'+documentId+'" onclick="deleteDoc(this)" id="deleteDoc'+rowIndex+'">×</a>'   
          +'<div id="-button"><a href="#" data-id="'+documentId+'" data-value="docImage'+rowIndex+'" onclick="viewDocs(this)" id="viewDocs'+rowIndex+'">' 
          +'<img width="150" height="200" alt="" id="testImage_attachment'+rowIndex+'" class="img-thumbnail imgSize" src="data:image/png;utf8;base64,'+relativePath+'">' 
          +'</a></div><div class="checkbox"><center>'; 

          if(primaryImage == 'Y'){ 
           rowStr = rowStr +'<input type="checkbox" align="middle" value="" onchange="validateCheckBox(this)" id="checkbox-'+documentId+'" style="margin-left:-9px" checked="checked">'; 
          }else{ 
           rowStr = rowStr +'<input type="checkbox" align="middle" value="" onchange="validateCheckBox(this)" id="checkbox-'+documentId+'" style="margin-left:-9px">'; 
          } 
          rowStr = rowStr +'</center></div></div>'; 

          $("div>div.item").removeClass("active"); 

          carouselStr = carouselStr +'<div id="docImage'+rowIndex+'" data-value="'+documentId+'" class="item active">' 
          +'<img alt="" class="img-responsive" src="data:image/png;utf8;base64,'+relativePath+'">' 
          +'</div>'; 

          indicatorStr = indicatorStr +' <li id="indicator'+rowIndex+'" class="" data-slide-to="'+rowIndex+'" data-target="#myCarousel"></li>'; 


         $('#insertAttachment').after(rowStr); 
         $('#insertCarouselItem').after(carouselStr); 
         $('#insesrtIndicator').before(indicatorStr); 
        } 




       </script> 

Hier verwende ich Ajax Aufruf für Bild hochladen. Wenn ich ein Bild auf den Bildschirm hochlade, kommt das hochgeladene Bild zuerst auf dem Bildschirm. Ich möchte, dass das zuletzt aktualisierte Bild zuletzt gefolgt von einem anderen Bild kommt. Ich habe mein Skript hier angehängt. Ich habe versucht, den Index zu ändern, aber das Bild wird überlagert. gib mir etwas Lösung

Answer 1

Sie können json Objektdaten umkehren, wie folgt:

var jsonResponse = JSON.parse(data); 
    var reversedData = jsonResponse.reverse(); 

, wenn Sie eine beliebige Taste innerhalb JSON haben Sie tun können, wie folgend:

var reversedData = jsonResponse.ANY_SUB_KEY.reverse(); 

ODER

Get Daten vom Server in der erwarteten Reihenfolge (wie hochgeladenes Datum/Uhrzeit in absteigender Reihenfolge)