Question

以下代码表示如果我们点击发送按钮没有选择文件和没有输入员工姓名，将显示提醒信息警告消息，如“填写所有字段”。但我不知道如何验证如果选择了文件。请帮帮我......

    <form method="post" action="Save.php" enctype="multipart/form-data">
    <input type="text" name="txt1" id="txt1"  placeholder="Staff Name" />
    <?php for($i=0;$i<5;$i++) { ?>
         <input type="file" name="f[]" id="f[]" />
    <?php } ?>
    <input type="submit" class="btnsend" id="btnsend" name="btnsend" value="Send"  >

Answer 1

div

为每个输入执行此操作

...你可以检查是否所有文件都是这样选择的：

var inputFile = document.getElementById("myFile"); // a <input type="file" element
if (inputFile.files.length > 0) // check if files are selected

Answer 2

您可以使用.querySelectorAll()选择名称为f[]

的元素

querySelectorAll()返回文档中的元素列表（使用与指定选择器组匹配的文档节点的深度优先预先遍历遍历）。返回的对象是NodeList。

当您使用input type="submit"时，您需要阻止表单submitting的提交按钮的默认行为。或者，一旦用户点击该按钮，我们就会action。

试试这个：

＆＃13;

document.getElementById('btnsend').addEventListener('click', handler);

function handler(e) {
  e.preventDefault();
  var files = document.querySelectorAll('[name="f[]"]');
  var error = '';
  Array.prototype.forEach.call(files, function(elem, index) {
    if (elem.value === '') {
      error += 'Invalid file ' + (index + 1) + '\n';
    }
  });
  if (error) {
    alert(error);
  } else {
    alert('All files are selected!');
  }
}

＆＃13;

<form method="post" action="Save.php" enctype="multipart/form-data">
  <input type="text" name="txt1" id="txt1" placeholder="Staff Name" />
  <br>
  <input type="file" name="f[]" id="f[]" />
  <br>
  <input type="file" name="f[]" id="f[]" />
  <br>
  <input type="file" name="f[]" id="f[]" />
  <br>
  <input type="file" name="f[]" id="f[]" />
  <br>
  <input type="file" name="f[]" id="f[]" />
  <br>
  <input type="submit" class="btnsend" id="btnsend" name="btnsend" value="Send">

＆＃13;

Fiddle here

如何使用javascript

2 个答案: