在Javascript中上载多个文件时检查重复文件_Javascript_Html_File Upload

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

javascript html file-upload

在Javascript中上载多个文件时检查重复文件,javascript,html,file-upload,Javascript,Html,File Upload,我使用下面的代码上传了多个文件。它的工作绝对好，但由于我需要检查我上传的文件是否重复，我面临一个问题。我为此创建了一个名为checkDuplicate的函数，并在函数内部调用它。但问题是for循环的循环大小是数组的两倍。我不知道为什么会这样。如果有人有任何想法，请帮助我这里是Javascript <script type="text/javascript"> function MultiSelector(list_target, max) { this.list_targ

我使用下面的代码上传了多个文件。它的工作绝对好，但由于我需要检查我上传的文件是否重复，我面临一个问题。我为此创建了一个名为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>


函数多选择器（列表\目标，最大值）{
this.list\u target=list\u target；
此值为0.count；
此参数为0.id；
如果（最大值）{
this.max=max；
}否则{
这个最大值=-1；
};
this.addElement=函数（元素）{
if（element.tagName=='INPUT'&&element.type=='file'）{
element.name='file_'+this.id++；
element.multi_选择器=此；
element.onchange=函数（）{
var new_element=document.createElement（'input'）；
new_element.type='file'；
this.parentNode.insertBefore（新的_元素，this）；
此.multi_选择器.addElement（新_元素）；
this.multi_selector.addListRow（this）；
this.style.position='绝对'；
this.style.left='-1000px'；
};
如果（this.max！=-1&&this.count>=this.max）{
element.disabled=true；
}
;
这个.count++；
this.current_元素=元素；
} 
否则{
警报（“错误：不是文件输入元素”）；
}
;
};
this.addListRow=函数（元素）{
var new_row=document.createElement（'div'）；
var new_row_button=document.createElement（'img'）；
new_row_button.setAttribute（“src”，“/images/deletei.gif”）；
新建行按钮。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；
返回false；
}; 
如果（选中重复（元素））{
new_row.element=元素；
new_row.innerHTML=element.value+“”；
新增行。追加子项（新增行按钮）；
this.list\u target.appendChild（新行）；
}
};
};
函数检查重复（元素）{
var arr=新数组（）；
var i=0，dup=0；
//警报（new_row.element=element.value）；
如果（dup==0）{
arr[i++]=element.value；
dup=1；
}
警报（“长度==>”+arr.Length）；
对于（var j=0；j”+arr[j]）；
如果（arr[j]==element.value&&j>=1）{
警告（“重复”）；
}否则{
警惕（“不重复”）；
arr[i++]=element.value；
}
}
}

这是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>






文件夹：
var multi_selector=新的MultiSelector（文档
.getElementById（'files_list'），15）；
multi_selector.addElement（document.getElementById（'my_file_element'）；

因为您有arr[i++]=element.value；在最后一行中，和for中的j 将for行更改为以下两行：

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

var len=arr.length；
对于（var j=0；j