在Javascript中上传多个文件时检查重复文件

时间:2012-05-21 10:02:56

标签: javascript html file-upload

我使用以下代码上传多个文件。它的工作绝对正常,但我需要检查我上传的文件是否重复,我面临一个问题。我为此创建了一个名为 checkDuplicate 的函数,并在函数内部调用它。但问题是for循环的循环次数是数组的两倍。我不知道为什么会这样。如果有人有任何想法,请帮助我。

以下是Javascript

<script type="text/javascript">

function MultiSelector(list_target, max) {
    this.list_target = list_target;
    this.count = 0;
    this.id = 0;
    if (max) {
       this.max = max;
    } else {
       this.max = -1;
};

this.addElement = function(element) {

if (element.tagName == 'INPUT' && element.type == 'file') {
    element.name = 'file_' + this.id++;
    element.multi_selector = this;
    element.onchange = function() {
    var new_element = document.createElement('input');
    new_element.type = 'file';
    this.parentNode.insertBefore(new_element, this);
    this.multi_selector.addElement(new_element);
    this.multi_selector.addListRow(this);
    this.style.position = 'absolute';
    this.style.left = '-1000px';
};

if (this.max != -1 && this.count >= this.max) {
    element.disabled = true;
}
;
this.count++;
this.current_element = element;
} 
else {
     alert('Error: not a file input element');
}
;
};

this.addListRow = function(element) {
     var new_row = document.createElement('div');
     var new_row_button = document.createElement('img');
     new_row_button.setAttribute("src","<%=request.getContextPath()%>/images/deletei.gif");
     new_row_button.onclick = function() {
     this.parentNode.element.parentNode.removeChild(this.parentNode.element);
     this.parentNode.parentNode.removeChild(this.parentNode);
     this.parentNode.element.multi_selector.count--;
     this.parentNode.element.multi_selector.current_element.disabled = false;
     return false;
}; 
if(checkDuplicate(element)) {
   new_row.element = element;
   new_row.innerHTML = element.value + "&nbsp;&nbsp;";
   new_row.appendChild(new_row_button);
   this.list_target.appendChild(new_row);
}
};
};
function checkDuplicate(element) {
    var arr = new Array();
    var i = 0,dup=0;
    //alert(new_row.element = element.value);
    if(dup==0) {
       arr[i++] = element.value;
       dup=1;
    }
    alert("Length ==> "+ arr.length);
    for ( var j = 0; j < arr.length; j++) {
         alert("Name ==> " + arr[j]);
         if(arr[j] == element.value && j>=1) {
            alert("Duplicate");
         } else {
           alert("Not Duplicate");
           arr[i++] = element.value;
         }
    }
}
</script>

这是HTML

<body>
<!-- This is the form -->
<form enctype="multipart/form-data" action=""method="post">
<input id="my_file_element" type="file" name="file_1">
<input type="submit">
<br/>
<br/>
Files:
<!-- This is where the output will appear -->
<div id="files_list"></div>

</form>
<script>
var multi_selector = new MultiSelector(document
.getElementById('files_list'), 15);

multi_selector.addElement(document.getElementById('my_file_element'));
</script>
</body>
</html>

1 个答案:

答案 0 :(得分:1)

因为你有arr [i ++] = element.value;在最后一行中,j&lt; for中的arr.length,所以每次array.lenght越来越大。

将for行改为这两行:

var len = arr.length;
for ( var j = 0; j < len; j++) {