Дублирование изображения после многократного ввода файла

Question

У меня есть проблема: я хочу загрузить несколько изображений одновременно и сразу же показать их в браузере.Все отлично.Однако, делая это на мобильных устройствах, иногда я получаю не все изображения, а дубликаты другого из массива файлов.У меня есть подозрение, что это связано с аппаратными ограничениями, так как на ПК все работает нормально, но не на мобильном.

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

Так что в результате я получаю это на мобильном телефоне.В подборке было не два изображения, а только одно:

Здесь у меня есть фрагмент кода Javascript.Есть ли место для улучшения?Особенно загруженные процессы время от времени сбивают меня с толку.Есть ли шанс написать это лучше?

Javascript:

jQuery('.upload-mobile').change(function(){
    jQuery('body').toggleClass( "loading" );
    var imagecounter = jQuery(this)[0].files.length;
    var loadcounter = 0;
    for(var i = 0; i<imagecounter;i++){
        for(var p = 1;p<=12;p++){
            if(jQuery('#preview'+p).length<=0){
                jQuery('.image-collection').prepend(jQuery('<div></div>',{id:'preview'+p,css:{'display':'inline-block'}}));
                break;
            };
        }
        var file = this.files[i];
        var reader = new FileReader();
        reader.onload = function(e){  
                for(var w = 1;w<=12;w++){
                    if(jQuery('#preview'+w).children().length>0) {

                    }
                    else{
                        var img = document.createElement("img");
                        img.src = e.target.result;
                        img.id = 'img'+w;
                        img.className += " img-responsive";
                        img.className += " border-blue";
                        img.className += " image-small";
                        img.className += " image-cover";
                        img.style.display='none';
                        document.getElementById("preview"+w).appendChild(img);
                        break;
                    }
                }
                loadcounter++;
                if(loadcounter==imagecounter){
                    var count = jQuery('.image-collection').children().length;
                    jQuery('.image-small').delay('1500').fadeIn('3000', function(){
                        jQuery('#image-counter').text(count+'/12');
                        jQuery('body').removeClass( "loading" );
                        if( jQuery('#image-counter').text()=='12/12'){
                            jQuery('#upload-photos').fadeOut('200', function(){
                                jQuery('#three-cube-compact').fadeIn('200');
                            })
                        }
                    });
                }   
        };

        var image = reader.readAsDataURL(file);
    }
});

РЕДАКТИРОВАТЬ:

Я пытался использовать функцию forEach,Я не использовал для каждого цикла ранее, поэтому я не могу много сказать о разнице между foreach и for.Я не могу сказать, работает ли он лучше или нет, но я видел меньше дубликатов (возможно, я не часто проверял, чтобы оценить его хорошую функциональность).Это почти работает, но, может быть, есть другой способ заставить его работать без нареканий?

Javascript:

jQuery('.upload-mobile').change(function(){
    jQuery('body').toggleClass( "loading" );
    var imagecounter = jQuery(this)[0].files.length;
    var loadcounter = 0;
    Array.from(this.files).forEach(function (image, index){
        for(var p = 1;p<=12;p++){
            if(jQuery('#preview'+p).length<=0){
                jQuery('.image-collection').prepend(jQuery('<div></div>',{id:'preview'+p,css:{'display':'inline-block'}}));

                break;
            };
        };
        var reader = new FileReader();
        reader.onload = function(e){
                for(var w = 1;w<=12;w++){
                    if(jQuery('#preview'+w).children().length>0) {

                    }
                    else{
                        var img = document.createElement("img");
                        img.src = e.target.result;
                        img.id = 'img'+w;
                        img.className += " img-responsive";
                        img.className += " border-blue";
                        img.className += " image-small";
                        img.className += " image-cover";
                        img.style.display='none';
                        document.getElementById("preview"+w).appendChild(img);

                        break;
                    }
                }
                loadcounter++;
                if(loadcounter==imagecounter){
                    var count = jQuery('.image-collection').children().length;
                    jQuery('.image-small').delay('1500').fadeIn('3000', function(){
                        jQuery('#image-counter').text(count+'/12');
                        jQuery('body').removeClass( "loading" );
                        if( jQuery('#image-counter').text()=='12/12'){
                            jQuery('#upload-photos').fadeOut('200', function(){
                                jQuery('#three-cube-compact').fadeIn('200');
                            })
                        }
                    });
                }
        };
        var pic = reader.readAsDataURL(image);
    });
});

EDIT2:

Обновлена ​​скрипка

EDIT3:

Добавлено изображение экрана мобильного устройства.Я также понял, что это может быть связано с файловым менеджером на мобильном устройстве.Когда я выбираю с помощью первого файлового менеджера, я не получаю ошибку дублирования:

Однако, нажимая на Обзор ("Durchsuchen" наизображение), я попадаю в другой файловый менеджер.И использование этого создает эту «ошибку дублирования»:

Возможно, есть способ решить эту проблему или отключить кнопку Обзор?