javascript - 循环的文件预览可以很好地处理一个项目，两个或多个文件重复最后一个文件

Question

This question already has answers here:

JavaScript closure inside loops – simple practical example
                                
                                    （44个回答）
                                
                        
                                6个月前关闭。
            
                    
我想预览多张图像，因为它们在提交时会出现在帖子中。下面的代码对一个文件有效。它的显示与我希望的完全一样。

$('input[name="filesToUpload[]"]').on('change', function(event) {
        $('body').css('overflow','hidden');
        $('body').css('margin-right','1.7rem');
        $('.navbar_more').css('margin-right','1.7rem');
        $('.post_preview').removeClass('cssdisplaynone');
        var checkfiles = $(this)[0].files;
        if(checkfiles) {
            var filesAmount = checkfiles.length;
            for(var i = 0; i < filesAmount; i++) {
                var previewHTML = '';
                var file = $(this)[0].files[i];
                var fileType = file.type;
                if(fileType.search('image') >= 0) {
                    var img = new Image();
                    var imgsrc = window.URL.createObjectURL(file);
                    img.src = imgsrc;
                    img.onload = function(event) {
                        previewHTML += '<div class="post_file ' + ((i == 1) ? 'post_file_show' : '') + '" style="padding-bottom: ' + ((this.height / this.width) * 100) + '%">';
                        previewHTML += '<img src="' + imgsrc + '" width="' + this.width + '" height="' + this.height + '" />';
                        if(filesAmount > 1) {
                            previewHTML += '<span class="post_count">' + i + '/' + filesAmount + '</span>';
                        }
                        previewHTML += '</div>';
                        $('.post_preview').find('.post_content').append(previewHTML);
                    }
                }
            }
        }
    });

单文件输出：

<div class="post_file post_file_show" style="padding-bottom: 75%"><img src="BLOB URL 1" width="480" height="360"></div>

但是，例如，当我尝试预览两个或更多图像时，输出不是我期望的那样。

两个文件输出：

<div class="post_file " style="padding-bottom: 100%"><img src="BLOB URL 2" width="1024" height="1024"><span class="post_count">2/2</span></div>
<div class="post_file " style="padding-bottom: 100%"><img src="BLOB URL 2" width="1024" height="1024"><span class="post_count">2/2</span></div>
<div class="post_file " style="padding-bottom: 75%"><img src="BLOB URL 2" width="480" height="360"><span class="post_count">2/2</span></div>

三个文件输出：

<div class="post_file " style="padding-bottom: 100%"><img src="BLOB URL 3" width="1024" height="1024"><span class="post_count">3/3</span></div>
<div class="post_file " style="padding-bottom: 100%"><img src="BLOB URL 3" width="1024" height="1024"><span class="post_count">3/3</span></div>
<div class="post_file " style="padding-bottom: 153.45454545454544%"><img src="BLOB URL 3" width="550" height="844"><span class="post_count">3/3</span></div>
<div class="post_file " style="padding-bottom: 100%"><img src="BLOB URL 3" width="1024" height="1024"><span class="post_count">3/3</span></div>
<div class="post_file " style="padding-bottom: 153.45454545454544%"><img src="BLOB URL 3" width="550" height="844"><span class="post_count">3/3</span></div>
<div class="post_file " style="padding-bottom: 75%"><img src="BLOB URL 3" width="480" height="360"><span class="post_count">3/3</span></div>

这不是我的强项。我对PHP非常满意，但是为了获得良好的用户体验，我需要在上传之前使用javascript预览图像，以便用户可以描述帖子，而不是在之后添加帖子，这很麻烦。

编辑

这是更新的代码，实际上可以解决几乎所有问题。重复的问题不见了。 URL不正确的问题已经解决。我是从 How to pass parameters into image load event?那里得到的。

但是，这确实带来了异步完成的问题，因此文件追加乱序...我正试图找到解决该问题的方法，因为许多帖子一直在说这不是“邪恶” ...

if($(this)[0].files[i].type.search('image') >= 0) {
                var img = new Image();
                img.dataurl = objectUrl;
                img.j = i;
                img.onload = function(event) {
                    previewHTML += '<div class="post_file ' + ((this.j == 0) ? 'post_file_show' : '') + '"  style="padding-bottom: ' + ((this.height / this.width) * 100) + '%">';
                    previewHTML += '<img src="' + this.dataurl + '" width="' + this.width + '" height="' + this.height + '" />';
                    if(fileList.length > 1) {
                        previewHTML += '<span class="post_count">' + (this.j + 1) + '/' + fileList.length + '</span>';
                    }
                    previewHTML += '</div>';
                    $('.post_preview').find('.post_content').append(previewHTML);
                    previewHTML = '';
                }
                img.src = objectUrl;
            }

最佳答案

尽管我不是专家，但我似乎很简单地坚持了您的问题
仍然不可行，所以在尝试了很多事情之后，我才知道图像的来源
应该在定义onload事件之后设置，此外，您的onload函数只是触发
一旦输入了新关键字，现在代码中显示了2张或更多图片，我确定您可以使用它，并在需要时进行改进

$('input[name="filesToUpload[]"]').on('change', function(event) {
        $('body').css('overflow','hidden');
        $('body').css('margin-right','1.7rem');
        $('.navbar_more').css('margin-right','1.7rem');
        $('.post_preview').removeClass('cssdisplaynone');
        var checkfiles = $(this)[0].files;
        if(checkfiles) {
            var filesAmount = checkfiles.length;

            for(var i = 0; i < filesAmount; i++) {
                var previewHTML = '';
                var file = $(this)[0].files[i];
                var fileType = file.type;
                if(fileType.search('image') >= 0) {

                    var img = new Image();
                    var imgsrc = window.URL.createObjectURL(file);

                    img.onload = new function(event) {

                        previewHTML += '<div class="post_file ' + ((i == 1) ? 'post_file_show' : '') + '" style="padding-bottom: ' + ((this.height / this.width) * 100) + '%">';
                        previewHTML += '<img src="' + imgsrc + '" width="' + this.width + '" height="' + this.height + '" />';
                        if(filesAmount > 1) {
                            previewHTML += '<span class="post_count">' + i + '/' + filesAmount + '</span>';
                        }

                        previewHTML += '</div>';
                        $('.post_preview').find('.post_content').append(previewHTML);
                    }

                    img.src = imgsrc;


                }
            }
        }


    });

关于javascript - 循环的文件预览可以很好地处理一个项目，两个或多个文件重复最后一个文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57942715/

上一篇：javascript - 我们可以处理 adf 托管 bean 中的 Raise Application 错误吗

下一篇：javascript - 如何将字符串点符号转换为对象引用，而不是嵌套

Answer 1

尽管我不是专家，但我似乎很简单地坚持了您的问题
仍然不可行，所以在尝试了很多事情之后，我才知道图像的来源
应该在定义onload事件之后设置，此外，您的onload函数只是触发
一旦输入了新关键字，现在代码中显示了2张或更多图片，我确定您可以使用它，并在需要时进行改进

$('input[name="filesToUpload[]"]').on('change', function(event) {
        $('body').css('overflow','hidden');
        $('body').css('margin-right','1.7rem');
        $('.navbar_more').css('margin-right','1.7rem');
        $('.post_preview').removeClass('cssdisplaynone');
        var checkfiles = $(this)[0].files;
        if(checkfiles) {
            var filesAmount = checkfiles.length;

            for(var i = 0; i < filesAmount; i++) {
                var previewHTML = '';
                var file = $(this)[0].files[i];
                var fileType = file.type;
                if(fileType.search('image') >= 0) {

                    var img = new Image();
                    var imgsrc = window.URL.createObjectURL(file);

                    img.onload = new function(event) {

                        previewHTML += '<div class="post_file ' + ((i == 1) ? 'post_file_show' : '') + '" style="padding-bottom: ' + ((this.height / this.width) * 100) + '%">';
                        previewHTML += '<img src="' + imgsrc + '" width="' + this.width + '" height="' + this.height + '" />';
                        if(filesAmount > 1) {
                            previewHTML += '<span class="post_count">' + i + '/' + filesAmount + '</span>';
                        }

                        previewHTML += '</div>';
                        $('.post_preview').find('.post_content').append(previewHTML);
                    }

                    img.src = imgsrc;


                }
            }
        }


    });