JavaScript'输入多个'文件重复

时间:2013-02-06 10:08:21

标签: javascript arrays file input

这是我的代码:

        var rowData = [];

        var showFiles = function () {
            var input = document.getElementById('doc-upload');
            if (input.files.length > 0) {
                for (var i = 0; i < input.files.length; i += 1) {
                    rowData.push([input.files[i].name]);
                };
                console.log(rowData);
            };
        };
        document.getElementById('doc-upload').addEventListener('change', showFiles, this);

'rowData'在第一次上传某些内容时会恢复正常值。 在第二次尝试时,它开始复制传入的值。

如果我先上传1个文件,请尝试一下。 我第二次得到2个相同的文件。 第三个4个文件,exetera。

为什么会这样?

UPD:

更多解释: 什么是幸福的:我上传x.doc我的数组是[x.doc],现在我想上传y.doc。我选择y.doc,我的数组转到[x.doc,y.doc,y.doc],然后我上传z.doc和aaray看起来像[x.doc,y.doc,y.doc,z。 doc,z.doc,z.doc,z.doc]。等等。它必须用长度属性做一些事情,我搞砸了一些如何。

UPD2:

现在代码的完整版本:

    //file upload
    var rowData = [];
    docAddButton.addListener('click', function () {
        var showFiles = function () {
            var input = document.getElementById('doc-upload');
            if (input.files.length > 0) {
                for (var i = 0; i < input.files.length; i += 1) {
                    if (rowData.indexOf(true, input.files[i].name, Math.round(input.files[i].size * 0.001) + ' кб') === -1) {
                        rowData.push([
                            true,
                            input.files[i].name, 
                            Math.round(input.files[i].size * 0.001) + ' кб'
                        ]);
                    }
                }
                console.log(rowData);
                tableModel.setData(rowData);
            };
        };
        document.getElementById('doc-upload').addEventListener('change', showFiles, this);
    });

Thanx每个帮助过的人!

解决方案: 你可以从UPD2看到我在eventListener'click'中有我的功能。发生的事情是,每当我按下输入按钮时,它就会恢复额外的“改变”听众。

我更改了.addListener以输入.addListenerOnce。

2 个答案:

答案 0 :(得分:0)

据推测,您没有重新加载页面,而且您没有清除rowData。您尚未显示定义rowData的方式/位置,但似乎在调用showFiles之间会重复使用相同的实例。 (如果你没有在任何地方宣布它,你就会成为The Horror of Implicit Globals的牺牲品。)


从下面的评论中,您可能希望将条目保留在rowData中,但您只想添加条目。如果是这样,您需要进行明确的检查:

var showFiles = function () {
    var input, i, file;

    input = document.getElementById('doc-upload');
    for (i = 0; i < input.files.length; i += 1) {
        file = input.files[i].name;
        if (indexOfFile(rowData, file) === -1) {
            rowData.push([file]);
        }
    };
    console.log(rowData);
};

function indexOfFile(data, file) {
    var index;

    for (index = 0; index < data.length; ++index) {
        // Note that the 0 may need to be changed if the
        // `rowData.push([file])` line above doesn't put
        // the filename at index 0
        if (data[index][0] === file) {
            return index;
        }
    }
    return -1;
}

旁注:您已经说过推动数组而不仅仅是文件名的原因是,您在该数组中还包含了其他信息,但是您将其排除在问题之外。这很好,但可能很精致,请参阅上面有关索引0的说明。您可以考虑使用对象数组:

rowData.push({
    file: file,
    other: "info",
    goes: "here"
});

...然后在indexOfFile

if (data[index].file === file) {

这样,如果改变你正在推动的结构,代码就不容易破坏。

答案 1 :(得分:0)

基本上,

rowData.push()

只会将元素追加到变量的末尾。您需要检查这些输入是否已经存在。

(编辑 - )

试试这个: -

        rowData=[];
        var showFiles = function () {
        var input = document.getElementById('doc-upload');
        if (input.files.length > 0) {
            for (var i = 0; i < input.files.length; i += 1) {
              var f=[];
              for(var j=0;j<rowData.length;j++)
                 f.push(rowData[j][0]);
              if(f.indexOf(input.files[i].name) == -1)
                  rowData.push([input.files[i].name]);
            }
            console.log(rowData);
        };
    };
    document.getElementById('doc-upload').addEventListener('change', showFiles, this);