检查多个上传框的文件扩展名答案

【问题标题】：check file extensions for more than one upload box检查多个上传框的文件扩展名
【发布时间】：2017-08-02 17:15:31
【问题描述】：

我想允许用户在两个输入文件中只上传pdf 文件：

<form onsubmit='return checkExt()' action='upload.php' method='POST'>
    <label>upload the first file</label>
    <input type='file' name='fileToUpload' id='fileToUpload' required>

    <label>upload the secondfile</label>
    <input type='file' name='fileToUpload1' id='fileToUpload1' required>
</form>

我使用以下脚本检查要上传的文件的扩展名：

<script>
    function checkExt() {
        var allowedFiles = [".pdf"];
        var form_valid = document.getElementById("fileToUpload");
        var form_valid2 = document.getElementById("fileToUpload1");
        var regex = new RegExp("([a-zA-Z0-9\s_\\.\-:])+(" + allowedFiles.join('|') + ")$");

        if (!regex.test((form_valid.value.toLowerCase()) &&(form_valid2.value.toLowerCase()))) {
            alert('only PDF files are allowed');
            return false;
        }
        return true;
    }
</script>

问题是：当我测试它时，它只检查第一个文件是否是 pdf。它不检查第二个文件。

【问题讨论】：

参考stackoverflow.com/questions/4234589/…

标签： javascript php upload

【解决方案1】：

您不需要 javascript 来验证文件类型。只需在输入标签中使用accept 属性即可。

在此处查看文档：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file

&lt;input name="myFile" type="file" accept=".pdf" multiple&gt;

【讨论】：

【解决方案2】：

您在 if 条件中的第二次检查应该反映第一次检查，这就是它不起作用的原因。无论如何，最简单且可扩展的方法是迭代“文件”类型的输入字段。像这样：

function checkExt() {
  var fileInputs = document.querySelectorAll('input[type="file"]');
  var isValid = true;
  var allowedFiles = [".pdf"];
  var regex = new RegExp(
    "([a-zA-Z0-9s_\\.-:])+(" + allowedFiles.join("|") + ")$"
  );

  fileInputs.forEach(function(input) {
    if (!regex.test(input.value.toLowerCase())) {
      isValid = false;
    }
  });

  if (isValid) {
    alert("only PDF files are allowed");
  }

  return isValid;
}

这允许您添加任意数量的文件输入字段。

【讨论】：