Question

我想允许用户仅在两个输入文件中上传endpoints: { 'https://localhost:45678/': 'https://localhost:45678/' <-- the address of the API/APP I want to call }个文件：

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>

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

Answer 1

您不需要javascript来验证文件类型。只需使用输入标记中的accept属性。

请参阅此处的文档：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file

＆＃13;

<input name="myFile" type="file" accept=".pdf" multiple>

＆＃13;

Answer 2

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

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;
}

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

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

2 个答案: