Question

我继承了一个webapp，允许用户一次最多提交7个文件。有一些代码可用于检查是否有两个相同的文件，但它体积庞大且不灵活。

if (elementId == "file2") {     
    if ((form.file2.value == form.file1.value) ||
        (form.file2.value == form.file3.value) ||
        (form.file2.value == form.file5.value) ||
        (form.file2.value == form.file6.value) ||
        (form.file2.value == form.file7.value)) {
        alert("ERROR!  File - " + form.file2.value + "\nselected more than once.  Select another file.");
        validFile = "false";    
     }
}

如果我想添加另一个文件或删除文件，我必须改变JavaScript / Jquery以使用新代码。我想让它变得灵活。

在我的代码中的其他地方，我已经能够削减我的代码以根据他们提交的日期检查文件名以查看它们是否匹配

$("[id^=file]").filter(function() {
    if ($(this).val().length > 0){
        if($(this).val().search(reportingPeriod) < 0 ) { 
          alert("ERROR! " + $(this).get(0).id + " does not match the selected reporting period!"); 
          $(this).focus(); 
          validForm = false;
        }                                               
    }
});

我想我可以使用这些行来检查文件名，但是当我$(this).val()时，我只返回第一个文件名，而不是所有文件名。我可以使用同样的想法并将所有文件名放入一个数组并在那里进行重复检查吗？如果是这样的话？或者有更好的方法来做我想做的事情吗？

Answer 1

有很多方法可以做到这一点。一种方法是使用一个公共类并循环遍历值并查找匹配项。

$(".test").on("change", function() {
    var allFields = $(".test").removeClass("error");  //Get the text fields
    var vals = allFields.map( function() { return this.value; }).get();  //get the values into an array
    while(vals.length>1) {  //loop until we only have one value left
       var val = vals.pop();  //pull off an index to see if it exists
       if (vals.indexOf(val)>-1) {  //if exists, find the others and set error
           allFields.not(".error").filter( function(){ return this.value==val; }).addClass("error");
       }
    }      
});

.error { background-color: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="1" class="test" />
<input type="text" value="2" class="test" />
<input type="text" value="3" class="test" />
<input type="text" value="4" class="test" />
<input type="text" value="5" class="test" />

Answer 2

正确答案是@epascarello，但这是我修改它以满足我的需要的方式。我无法在答案下方的评论中发布

$(document).ready(function(){
$('input[type="file"]').change(function() {
    var allFields = $('input[type="file"]').removeClass("error");  //Get the text fields
    var vals = allFields.map( function() { return this.value; }).get();  //get the values into an array
    vals = jQuery.grep(vals, function(value){ return value != "" })
    while(vals.length > 1) {  //loop until we only have one value left
        var val = vals.pop();  //pull off an index to see if it exists
        if (vals.indexOf(val)>-1) {  //if exists, find the others and set error
            alert("Duplicate File Selected!");
            return false;
        }
    }      
});

}）

jquery - 检查文件是否相同

2 个答案: