javascript - 如何在屏幕最后显示最近上传的图片？

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 调用来上传图片。如果我在屏幕中上传图片，则上传的图片首先出现在屏幕中。我希望最近更新的图像最后出现，然后是其他图像。我在此处附上了我的脚本，我尝试更改索引但图像重叠。给我一些解决方案

Answer 1

可以如下反转json对象数据:

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

如果您在 JSON 中有任何键，您可以执行以下操作:

 var reversedData = jsonResponse.ANY_SUB_KEY.reverse();

或

按预期顺序从服务器获取数据(如上传日期/时间按降序排列)