最近アップロードされた画像を画面の最後に表示するにはどうすればいいですか？

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> 

ここでは、画像のアップロードにajaxコールを使用しています。画面に画像をアップロードすると、アップロードされた画像が最初に画面に表示されます。私は最近更新された画像が最後に他の画像の後に来るようにしたい。私はここに私のスクリプトを添付して、私はインデックスを変更しようとしたが、画像は重なってしまう。

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

をあなたは次のように行うことができますJSON内の任意のキーを持っている場合：取得

var reversedData = jsonResponse.ANY_SUB_KEY.reverse(); 

OR

を私に次のように

Answer 1

あなたはJSONオブジェクトデータを逆にすることができ、いくつかの解決策を与えますサーバーからのデータ（予想された順序でアップロードされた日時など）