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;
}
}
}
});