Question

我有用于文件上传的下一个HTML代码，如果要上传两个相同的名称和扩展名文件，我需要JS来检查文件名并显示消息。

<div id="el_1">
<input name="file_1" id="file_1" type="file">
</div>
<div id="el_2">
<input name="file_2" id="file_2" type="file">
</div>
<div id="el_3">
<input name="file_3" id="file_3" type="file">
</div>
<input name="button" id="button" type="submit" value="Submit" class="" style="">

Answer 1

例如，您必须更改div的ID，因此它必须是唯一的

$('#file_1, #file_2, #file_3').change(function(e){
    if (($('#file_1').val() == $('#file_2').val()) || ($('#file_1').val() == $('#file_3').val()) || ($('#file_2').val() == $('#file_3').val()))
    {
      alert("one file or two are duplicated")
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="file_1">
<input name="file_1" id="file_1" class="" title="" style="" multiple="0" type="file">
</div>
<div class="file_2">
<input name="file_2" id="file_2" class="" title="" style="" multiple="0" type="file">
</div>
<div class="file_3">
<input name="file_3" id="file_3" class="" title="" style="" multiple="0" type="file">
</div>
<input name="button" id="button" type="submit" value="Submit" class="" style="">

Answer 2

@mouhamd Agoumi非常感谢。我更改了代码：

$('#file_1, #file_2, #file_3').change(function (e) {
            if ($('#file_1').val() != '' && $('#file_1').val() == $('#file_2').val() != '' && $('#file_2').val() || $('#file_1').val() != '' && $('#file_1').val() == $('#file_3').val() != '' && $('#file_3').val() || $('#file_2').val() != '' && $('#file_2').val() == $('#file_3').val() != '' && $('#file_3').val())
            {
                alert("one file or two are duplicated");
            }
        });

Answer 3

这是一个纯JavaScript的解决方案，它不会将您限制为一定数量的输入。

您将需要遍历所有输入标签，并查看其中是否有选择相同的文件。您可以使用多种方法来执行此操作，但是无论您如何执行，都希望查看所选文件的文件名。文件类型输入具有files属性。它可能包含多个文件，但您不应该包含多个文件。 files属性是FileList。 FileList的每个元素都有一个name属性，该属性包含包含扩展名的文件名。这是概念证明：

<html>
<head>
<title>Test</title>
</head>
<body>
<form action="some action">
<div class="container">
   <input type="file" name="myFile1"  class="testFiles"><br>
   <input type="file" name="myFile2"  class="testFiles"><br>
   <input type="file" name="myFile3"  class="testFiles"><br>
   <input type="file" name="myFile4"  class="testFiles"><br>
   <input type="submit" name="Submit" onclick="checkDuplicates(event)">
</div>
</form>
<script type="text/javascript">
checkDuplicates = function(e){
  var arr = [];
  var fileInputs = document.querySelectorAll(".testFiles");
   fileInputs.forEach(function(input){
    if(arr.length == 0){
      arr.push(input.files[0].name);
    } else {
      if(arr.indexOf(input.files[0].name) > -1){
        e.preventDefault();
        alert("there's a duplicate");
      } else {
        arr.push(input.files[0].name);
      }
    }
  }); 
};
</script>
</body>
</html>

Answer 4

感谢Muhamd Agoumi和T. Stoddard，我已经为我准备了最终解决方案，我希望与您分享。

<!DOCTYPE html>
<html lang='en' class=''>
    <head><meta charset='UTF-8'>
        <meta name="robots" content="noindex">
    </head>
    <body>
        <div class="file_1">
            <input name="file_1" id="file_1" class="files" title="" style="" multiple="0" type="file">
        </div>
        <div class="file_2">
            <input name="file_2" id="file_2" class="files" title="" style="" multiple="0" type="file">
        </div>
        <div class="file_3">
            <input name="file_3" id="file_3" class="files" title="" style="" multiple="0" type="file">
        </div>
        <input name="button" id="button" type="submit" value="Submit" class="" style="" onclick="checkDuplicates(event)">
        <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
        <script >
            $('#file_1, #file_2, #file_3').change(function (e) {
                if ($('#file_1').val() != '' && $('#file_1').val() == $('#file_2').val() != '' && $('#file_2').val() || $('#file_1').val() != '' && $('#file_1').val() == $('#file_3').val() != '' && $('#file_3').val() || $('#file_2').val() != '' && $('#file_2').val() == $('#file_3').val() != '' && $('#file_3').val())
                {
                    alert("You can not send two or more same files.");
                }
            });
        </script>
        <script type="text/javascript">
            checkDuplicates = function(e){
              var arr = [];
              var fileInputs = document.querySelectorAll(".files");
               fileInputs.forEach(function(input){
                if(arr.length == 0){
                  arr.push(input.files[0].name);
                } else {
                  if(arr.indexOf(input.files[0].name) > -1){
                    e.preventDefault();
                    alert("You can not send two or more same files.");
                  } else {
                    arr.push(input.files[0].name);
                  }
                }
              }); 
            };
        </script>
    </body>
</html>

不久，有两个验证：选择文件时，如果选择了重复的文件，则第一个验证将立即触发。此验证将警告用户已选择两个相同的文件。如果用户忽略第一次验证，则在提交操作时将触发第二次验证。只要用户不删除重复的文件，便无法提交文件。

谢谢大家的帮助！

输入文件避免重复

4 个答案: