Jquery 在for循环内的函数中选择使用for循环创建的特定div

我试图用多图像上传输入字段显示选定文件的缩略图。下面是它应该如何工作-

用户选择多个图片示例5图片

对于每个文件，代码应该创建一个divas缩略图

由于图片文件大小巨大，浏览器可能需要一些时间才能转换为blob。因此，我为缩略图分区内的每个文件显示加载gif。缩略图分区类名是我稍后可以识别的图片名称

使用create_blobfile回调函数，图片开始转换为blob

一旦将每张图片转换为blob，它应该用blob代码替换特定的加载gif

我现在的问题是： 它创建的div数量与所选图片数量相同。正确显示loading.gif。但是，每次转换图片时，只有最后一个div会不断更新。我想更新特定图像的特定div。我知道变量在循环过程中会被更新，因为在得到结果之前它是异步的。我希望保持异步，但我也希望实现步骤5

这是我到目前为止的代码-

<input type="file" multiple id="add-file" accept="image/*">
<div id="output">
</div>
<script>
(function ($) {
$('#add-file').change(function() {
var files = this.files;
for (var i = 0, file; file = files[i]; i++) {
selected_div = file.name.replace(/[^a-z0-9\s]/gi, "").replace(/[_\s]/g, "-");
$( "#output" ).append( '<div class="section '+selected_div+'"><input type="hidden" class="blob-holder" name="gallery[]" /><img src="loading.gif" 
class="thumb" /></div>' );
create_blob(file, function(blob_string) {
$( "."+selected_div ).find( "img" ).attr('src', blob_string);
$( "."+selected_div ).find( "input" ).val(blob_string);
});
}
});
function create_blob(file, callback) {
var reader = new FileReader();
reader.onload = function() { callback(reader.result) };
reader.readAsDataURL(file);
}
})(jQuery);
</script>

在这里拉小提琴-

如何实现步骤5并保持异步

---

提前感谢

这是因为您使用的是从父函数中选择的_div，该函数将立即更新，并以最后一个div结束，您还应将其作为参数传递

function create_blob(file, divSelector, callback) {
   var reader = new FileReader();
   reader.onload = function() { callback(reader.result, divSelector) };
   reader.readAsDataURL(file);
}

你需要如下称呼它

create_blob(file, selected_div, function(blob_string, divSelector) {
   $( "."+divSelector).find( "img" ).attr('src', blob_string);
   $( "."+divSelector).find( "input" ).val(blob_string);
});

---

希望这有帮助。

这是因为您使用的是从父函数中选择的div，该函数将立即更新，并以最后一个div结束，您还应将其作为参数传递

function create_blob(file, divSelector, callback) {
   var reader = new FileReader();
   reader.onload = function() { callback(reader.result, divSelector) };
   reader.readAsDataURL(file);
}

你需要如下称呼它

create_blob(file, selected_div, function(blob_string, divSelector) {
   $( "."+divSelector).find( "img" ).attr('src', blob_string);
   $( "."+divSelector).find( "input" ).val(blob_string);
});

---

希望这能有所帮助。

非常感谢。我没有想到要将选择器传递给create_blob函数。非常感谢。我没有想到将选择器传递给create_blob函数。