1

https://stackoverflow.com/a/1234337/1690081

显示array.length = 0;它将为空数组，但在我的代码中它不会

这是一个示例：

window.onload = draw;
window.onload = getFiles;
var namelist = [];
function draw(){
    // assing our canvas to element to a variable
    var canvas = document.getElementById("canvas1");
    // create html5 context object to enable draw methods
    var ctx = canvas.getContext('2d');

    var x = 10; // picture start cordinate
    var y = 10; // -------||---------
    var buffer = 10; // space between pictures
    for (i=0; i<namelist.length; i++){
        console.log(namelist[i])
        var image = document.createElement('img');
        image.src = namelist[i];
        canvas.appendChild(image);
        ctx.drawImage(image,x,y,50,50);
        x+=50+buffer;
    }
}
function getFiles(){
    namelist.length = 0;// empty name list
    var picturesFiles = document.getElementById('pictures')
    picturesFiles.addEventListener('change', function(event){
        var files = picturesFiles.files;

        for (i=0; i< files.length; i++){
            namelist.push(files[i].name);
            console.log(namelist)
        }
        draw();
    }, false);

}

在我getFiles()第二次打电话后。它不会删除以前的列表，只是附加到它。知道为什么吗？

4

4 回答 4

1

您应该在事件处理程序中清空数组，而不是getFiles每个页面加载只调用一次。它实际上什么也没做，因为页面加载时数组已经为空。

picturesFiles.addEventListener('change', function(event){
    namelist.length = 0; //empty it here
    var files = picturesFiles.files;

    for (i=0; i< files.length; i++){
        namelist.push(files[i].name);
        console.log(namelist)
    }
    draw();
}, false);

另一个问题是您不能只设置.src文件名。这将向您的服务器发出文件请求。

要真正解决这个问题，只需将文件对象推送到名称列表：

namelist.push(files[i]);

然后，当您在绘图中处理它们时，创建本地化的 BLOB url 以显示它们：

var file = namelist[i];
var url = (window.URL || window.webkitURL).createObjectURL( file );
image.src = url;
于 2012-12-07T13:20:24.497 回答
0

看起来您正在namelist用作全局变量。如果您将新数组作为返回值从函数中传递出来，这将更容易（并且根本不需要清空它）。

IE：

function getFiles() {
    var newNameList = [];
    ..... //push entries here.
    return newNameList;
}

...然后namelist从您调用它的返回值填充：

namelist = getFiles();

但是，要回答实际提出的问题：

除了将长度设置为零之外，您还可以简单地通过将数组设置为新数组来重置数组：

namelist = [];

您还没有向我们展示您如何将条目“推送”到列表中，但我怀疑最终结果是namelist作为通用对象而不是数组对象生成的。如果是这种情况，那么设置.length=0将简单地向名为的对象添加一个属性，length其值为0。length您使用它的方式的属性仅适用于Array对象。

希望有帮助。

于 2012-12-07T13:16:34.357 回答
0

如果您使用的是非数字索引，那么数组将不会被清除。“...每当更改长度属性时，名称为数组索引且值不小于新长度的每个属性都会自动删除”

Test:
var arr = [];
arr['this'] = 'that';
arr.length = 0;
console.log(arr);
//output ['this':'that']

var arr = [];
arr[0] = 'that';
arr.length = 0;
console.log(arr);
//output []
于 2012-12-07T13:17:51.613 回答
0

清空数组的方式没有任何问题，因此您的代码肯定有其他问题。

这很好用，数组第二次不包含前面的项目：

var namelist = [];

function draw() {
    alert(namelist.join(', '));
}

function getFiles() {
    namelist.length = 0; // empty name list
    namelist.push('asdf');
    namelist.push('qwerty');
    namelist.push('123');
    draw();
}

getFiles();
getFiles();

演示：http: //jsfiddle.net/Guffa/76RuX/

编辑：

看到您的实际代码，问题来自使用回调方法来填充数组。每次调用该函数时，都会添加另一个事件处理程序，因此在第二次调用该函数后，它将调用两个事件处理程序，每个事件处理程序都将所有项目添加到数组中。

只添加一次事件处理程序。

于 2012-12-07T13:20:32.640 回答