0

我似乎找不到这个脚本的想法有什么问题，也无法让它发挥作用。也许您可以帮助我，我们将不胜感激。

我正在处理一个多文件上传表单。在上传之前（而不是在那之前），我想检查上传目录中是否已经存在一些文件（如果是，哪些文件）。我正在使用 XMLHttpRequests 来做到这一点。由于我无法控制获得响应所需的确切时间，我使用数组为所有变量运行一个循环，因此它们（至少这是我的想法 ;-)）可以彼此独立地完成工作。

function NoOverwrite() {
var fields = document.querySelectorAll("input[type=file]");
var existing = new Array(); //files existing on server
var checkFile = new Array();
var file = new Array();
var fileUrl = new Array();
for (var i = 0; i < fields.length; i++) {
    file[i] = document.getElementById('file'+i).files[0];  
    //the input- fields of the form are called file0, file1, file2, and so on...
    if(file[i]) {
        fileUrl[i] = 'upload_path/' + file[i].name; 
        //up to here everything works fine - when setting an alert after this I get 
        //the names of all the names of the files selected in the file fields! 
        checkFile[i] = new XMLHttpRequest();
        checkFile[i].open('HEAD', fileUrl[i], true);
        checkFile[i].onreadystatechange = function() {
            if (checkFile[i].readyState == 4) {
                if (checkFile[i].status == 200) {
                    existing[i] = true; 
                    alert(existing[i]);     //this never came up... 
                }
            }
        checkFile[i].send();
        }
    }
}
if (existing.indexOf(true) == -1) {
    //none of the files to be uploaded are already on server
    //this _always_ was fired - even when there are files with the same name on the server!!!??
    return true; 
}
else {
    //list filenames and/or upload field numbers of the files that already exist on server
    return false;
   }
}

我的想法有错误吗？还是我的代码中有一些简单的错误？有什么想法可以归档我的目标吗？

4

2 回答 2

0

我发现您的代码存在两个潜在问题。

第一个是同源策略：如果 upload_path 与当前页面不在同一个域中，则请求可能会失败。

第二个是你的索引：随着 i 的增加，当你这样做时alert(existing[i])i 已经等于 fields.length。您需要创建一个闭包：

for (var i = 0; i < fields.length; i++) {
    (function(index){
    // use index within your code
    })(i); // the loop will execute with index=i
}
于 2012-12-03T16:39:28.853 回答
0

好的，我找到了答案 - 以防万一有人感兴趣......

除了 Christophes 说必须为循环创建一个闭包之外，对数组的检查当然也必须在该循环函数内进行，否则会立即检查（即当没有 XMLHttpRequests 的单个响应时）然而），因为它只检查一次，它总是否定的。除此之外，在我们检查数组中的值之前，我们必须确保所有请求都已完成（不仅仅是正在处理）。我们通过比较已填写的上传字段的数量与已设置到字符串中的值的数量来做到这一点（这发生在相应请求的就绪状态响应返回之后）。代码中有更多解释。

干杯，克里斯

function NoOverwrite() {
var fields = document.querySelectorAll("input[type=file]");
var existing = new Array();
var checkFile = new Array();
var file = new Array();
var fileUrl = new Array();
var counter = 0;
for (var i = 0; i < fields.length; i++) {
    (function(index){
        file[index] = document.getElementById('file'+i).files[0];
        if(file[index]) {
            fileUrl[index] = 'upload_path/' + file[index].name;
            checkFile[index] = new XMLHttpRequest();
            checkFile[index].onreadystatechange = function() {
                if (checkFile[index].readyState == 4) {
                    if (checkFile[index].status == 200) {
                        existing[index] = true; 
                        counter += 1;
                    }
                    else {
                        existing[index] = false;
                        counter += 1;
                    }
                    if (counter == fileUrl.length) { 
                            //existing.length of the array "true, false,,true" (i.e. with one undefined value) would deliver "4". 
                            //therefore we have to check for the number of set variables in the string rather than the strings length. 
                            //we use a counter for that purpose. everything after this point is only executed when the last file has been checked! 
                        if (existing.indexOf(true) == -1) {
                            //none of the files to be uploaded are already on server
                            return true; 
                        }
                        else {
                            //list filenames and/or upload field numbers of the files that already exist on server
                            //   ->> inform user... 
                            return false;
                        }
                    }
                }
            }
            checkFile[index].open('HEAD', fileUrl[index], true);
            checkFile[index].send();
        }
    })(i);
}
}
于 2012-12-04T01:15:36.153 回答