移动网络下多图片上传不同选择方式耗时差异过大求助

我正在开发多图片上传功能，当前逻辑为选择图片时显示所有图片预览，再提交全部数据。

HTML代码 #

<input type="file" id="newimage" name="newimage" multiple="" accept=".jpg,.jpeg,.png" class="inputfile" onchange="readURLNEW(this,'5');">

JS代码 #

function readURLNEW(input,cnt) {
             
             if (input.files) {
                  
                 var dispimgcnt = $('.singleImageCanvasContainer').length;
                  
                 var filesAmount = input.files.length;
                 var total = filesAmount + dispimgcnt;
                   var imagesLoaded = 0;
                  if(total <= cnt)
                  {
                     $('.preloader').show();       
                    for (i = 0; i < filesAmount; i++) {
                         
                         var j = 1; 
                     var reader = new FileReader();
                     reader.onload =  function (e) {      
                        var image = new Image();  
                        image.onload =  function (imageEvent) {   
                            var canvas = document.createElement('canvas'),  
                                max_size = 500,// TODO : max size for a pic  
                                width = image.width,  
                                height = image.height;  
                            if (width > height) {  
                                if (width > max_size) {  
                                    height *= max_size / width;  
                                    width = max_size;  
                                }  
                            } else {  
                                if (height > max_size) {  
                                    width *= max_size / height;  
                                    height = max_size;  
                                }  
                            }  
                            canvas.width = width;  
                            canvas.height = height;  
                            canvas.getContext('2d').drawImage(image, 0, 0, width, height);  

                            var dataUrl = canvas.toDataURL('image/jpeg');  

                   var blob = dataURLToBlob(dataUrl);        
                          
                        var icnt = dispimgcnt > 0 ? (dispimgcnt + j) : j;
                          var data = new FormData();
                           
                          data.append('file', blob);
                          
                        $.ajax({
                            url :  "tempsave.php",
                            type: 'POST',
                            data: data,
                            async:false, 
                            contentType: false,
                            processData: false,
                            success: function(data) {  
                                                          if($('.singleImageCanvasContainer').length <= 0)
                                    display = 'block';         
                                
                             var div = $("<div class='singleImageCanvasContainer pimage' id='singleImageCanvasContainer"+(icnt)+"' style='display: inline-block;position: relative;margin-right:5px;margin-top: 10px;' > <button type='button' class='singleImageCanvasCloseBtn' style='position:absolute;background:#61f573;border:none;font-size:1.2em;border-radius:50%;-webkit-appearance: none;padding: 2px 8px 2px 8px;left: 78%;'>"
                              +"<i class='fa fa-bars'></i>"
                            +"<div class='dropdown-content' style='display:none'><a href='#' class='main_pic' style='display:'>Set as main picture</a><a href='#' class='crop_pic'>Crop</a><a href='#' class='delete_pic'>Delete</a></div>"
                           +"</button><button type='button' class='singleImageCanvasMainBtn' style='display:"+display+";position:absolute;background:#61f573;border:none;font-size:1.2em;border-radius:50%;-webkit-appearance: none;padding: 2px 8px 2px 8px;display: '><i class='fa fa-check'></i></button>"
                            +"<img style='border-radius:20px; height: 150px;width: 150px;border:1px solid lightgray' src='"+data+"' class='file-img img-loading'></div>"
                           );
                           
                             $('div.imgcontainer').append(div); 
                               imagesLoaded++;

                                if(imagesLoaded == filesAmount){
                                    allLoaded();
                                }
                              
                            },
                            error: function() {
                                 $('.preloader').hide();
                              alert("Failed!");
                            }
                          });
                          j++;
                           }
                             
                            image.src = e.target.result; 
                    
                         };
                         reader.readAsDataURL(input.files[i]);

                        }
                    
                     }
                                             
                 }
              
     }

移动网络下的异常耗时表现 #

• 同时选择5张5MB图片，服务器上传耗时94秒；
• 先选择4张5MB图片，再单独选择1张5MB图片，服务器上传耗时37秒；
• 每次选择1张5MB图片，共选择5次，服务器上传耗时16秒。

我的PHP代码仅为基础的图片保存与数据库存储逻辑，应该没有问题，怀疑JS代码存在问题。我使用了reader.onload、image.onload和ajax调用，是否是这些环节出现了问题？恳请帮忙排查！

内容的提问来源于stack exchange，提问作者ayyanar pms