Question

我正在尝试使用多个图像上传输入字段显示所选文件的缩略图。这是它应该如何工作的-

用户选择多张图片（例如5张图片）
对于每个文件，代码都应创建一个div（作为缩略图）
由于图片文件大小很大，浏览器可能需要一些时间才能转换为blob。因此，我正在显示为缩略图div中的每个文件加载gif。缩略图div类名称是图片名称（以便以后识别）
图片开始使用create_blob(file, callback)函数转换为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>

在这里拨弄-https://jsfiddle.net/b0xed/mfq54h9r/1/

如何实现第5步，并且仍然保持异步状态？

提前谢谢

Answer 1

这是因为您正在使用父函数中的format，该函数会立即更新并以最后一个div结尾，因此您也应该将其作为参数传递。

selected_div

，您需要按以下方式调用它；

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

希望这会有所帮助。

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

1 个答案: