reader.readasdataurl 在循环 JavaScript jQuery 中不起作用

Question

在我的要求中，所有上传的文件都需要转换为base64格式，并将它们的值推送到一个对象中。我有时得到了正确的输出，有时我没有得到它发送空值的值。下面是我的代码。

var fileControls = $('input[type="file"]');
var FilesObj = [];
for (var a = 0; a < fileControls.length; a++) {
    var files = fileControls[a].files;
    if (files.length > 0) {
        var sdd = fileControls[a].files[0];
        var reader = new FileReader();
        var Obj1 = new Object();
        // $(e.target).attr('id')
        reader.readAsDataURL(sdd);
        reader.onloadend = function (x,y) {
            Obj1.Key = x;
            // reader.readAsDataURL(y);
            var valRes = y.result;
            Obj1.Value = valRes;
            FilesObj.push(Obj1);
        }
        reader.onloadend(fileControls[a].id, reader);
    }
}

Answer 1

您可以将onload事件与参数一起使用。

var FilesObj=[]; 
function GetFiles(){
var fileControls = $('input[type="file"]');
            for (var a = 0; a < fileControls.length; a++) {
                var files = fileControls[a].files;
                if (files.length > 0) {
                    var file = fileControls[a].files[0];
                    var reader = new FileReader();
                    var Obj1 = new Object();
                    // $(e.target).attr('id')
                    reader.readAsDataURL(file);                 
                    reader.onload = (function(f,id) {
                    return function(e) {
                    // Here you can use `e.target.result` or `this.result`
                    // `f.id`and `f.name`.
                     Obj1.Key = id;
                                var valRes = this.result;
                                Obj1.Value = valRes;
                                FilesObj.push(Obj1);
                    };
                })(file,fileControls[a].id);
               }
            }
    }
    
    function ViewFiles (){
    $.each(FilesObj,function(i,obj){
    var $img = $("<img>").prop("id","img"+obj.Key).attr("src",obj.Value).prop("width","100").prop("height","100");
    $("#divImages").append($img);
    });
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type="file" id="file1">
<input type="file" id="file2">
<input type="file" id="file3">
<input type="file" id="file4">
<input type="file" id="file5">
<br>
<br>
<br>
<button type="button" onclick="GetFiles()">Get Files</button>
<button type="button" onclick="ViewFiles()">View Files</button>
<br>
<br>
<div id="divImages"></div>