FileReader() - 关闭和传递参数的问题

时间:2015-05-30 15:20:55

标签: javascript closures filereader

我对FileReader.onload()事件有几个问题:

我在以下两个代码段之间得到不同结果的原因是什么?只要我传递object实例,而不是显式的this.attachmentIndex值,我就会得到不同的结果。

1)

fileReader.onload = (function (file, obj) {
                    return function (evt) {
                        obj.attachmentIndex // 1
                    };
                })(f, this);

2)

        fileReader.onload = (function (file, index) {
            return function (evt) {
                index // 0
            };
        })(f, this.attachmentIndex);

Closure - FileReader.onload()

我面临的另一个问题是,我似乎无法将多个参数传递给我的FileReader.onload()事件处理程序。

        fileReader.onload = (function (file, one, two) {
            return function (evt) {
                one // 1
                two // undefined
            };
        })(f, 1, 2);

下面你可以找到整个对象。我不得不做一些丑陋的东西来实现我想要的东西。我真的希望有更好的方法来达到同样的效果。

function Note() {
    this.attachmentOutput = [];
    this.attachmentIndex = 0;
    this.debugging = false;
    this.currentWorkingObject = new NoteObject(helperFn.createGuid());
    this.addAttachement = function(files) { 
        for (var i = 0, f; f = files[i]; i++) {
            var fileReader = new FileReader(),

            fileReader.onload = (function (file, obj) {
                return function (evt) {
                    var base64File = evt.target.result;
                    obj["note"].addDataToAttachementObj(obj["index"], { data: base64File })
                };
            })(f, { note: this, index: this.attachmentIndex});

            // Async => reading file
            fileReader.readAsDataURL(f);

            this.attachmentIndex++
        }

        var html = app.outputTemplate(this.currentWorkingObject.attachements);
        $('.upload-output').html(html);
    };

};

触发功能:

$(".upload-drop-zone").on('drop', function (e) {
        e.preventDefault();
        var files = e.originalEvent.dataTransfer.files;
        app.myCurrentNote.addAttachement(files);
    });

1 个答案:

答案 0 :(得分:1)

  

我希望0作为结果中的索引值 - 最后我   得到它,但只是这个丑陋的解决方法。如果我没有通过   明确的说法,然后我得到1,我不知道为什么。

FileReader是异步的。 this.attachmentIndex似乎在

处增加到1
    // Async => reading file
    fileReader.readAsDataURL(f);

    this.attachmentIndex++ // <- `this.attachmentIndex` incremented to `1` here

可能在调用FileReader.onload事件之前。