Question

在这里存在此问题：我想一次上传多张图像，然后在浏览器中直接显示它们。一切都好。但是，在移动设备上执行此操作时，有时我无法获取所有图像，但是会从文件数组中复制另一幅图像。我怀疑这与硬件限制有关，因为在PC上一切正常，但不能在移动设备上运行。

Here is the fiddle. You can check it via mobile to see if duplicates appear.

因此，我在手机上得到了它。选择的不是两张图像，只有一张：

这里有Javascript代码段。有没有改进的空间？特别是onload进程确实使我时常感到困惑。有机会写得更好吗？

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函数。我之前没有为每个循环使用for，所以我不能过多地谈谈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：

The fiddle was updated

EDIT3：

添加了移动屏幕的图像。我还发现它可能与移动设备上的文件浏览器有关。当我选择使用第一个文件浏览器时，没有出现重复错误：

但是，通过单击浏览（图像上为“ Durchsuchen”），我进入了另一个文件浏览器。并使用它创建了这个“复制错误”：

也许可以解决此问题，或者禁用“浏览”按钮？

输入多个文件后复制图片

0 个答案: