javascript - 包含多个文件和其他输入字段的表单验证

Question

我有一个表单，允许用户输入文本并上传至少一个文件，文件大小小于 1GB。当点击表单的“提交”按钮时，该要求将通过 JavaScript 进行验证。但是，当我添加文件验证时，它没有任何响应显示文件的名称和大小，特别是当文件超过 1GB 时。

以下哪一种方法更好？

1. 选择文件后检查文件大小，如果文件大小超过1GB，则会提醒用户文件太大，需要重新选择。
2. 选择文件后，单击“提交”按钮时，在继续使用 PHP 将文件上传到服务器之前，整个表单的验证(包括输入文本字段和文件大小)是使用 JavaScript 完成的.

这是我的表格:

<script type="text/javascript" src="validate.js"></script>
  <form id="fileUpload" method="post" action="upload_action.php">
    <p>Text input: <input type="text" name="text_input" value=""/></p>
    <p>File upload: <input type="file" name="upload_file[]" multiple/></p>
    <input type="submit" value="Submit" onclick="return validate_form();"/>
  </form>

还有我的验证 JavaScript (validate.js):

function validate_form() {
    var valid=true;
    if (document.forms['fileUpload']['text_input'].value=='') {
        alert('You have to enter text');
        valid=false;
    }

    // File size validation goes here
}

编辑于香港时间中午 12:20:

现在可以按如下方式检查文件大小:

在 PHP 文件中:

<form id="fileUpload" method="post" action="upload_action.php">
    <p>Text input: <input type="text" name="text_input" value=""/></p>
    <p>File upload: <input type="file" id="upload_file" name="upload_file[]" multiple="true"></p>
    <input type="submit" value="Submit" onclick="return validate_form();"/>
  </form>

在 JavaScript 中

var MAX_SIZE = 1073741824;
    var x=document.getElementById("upload_file");  
    for(var i=0; i<x.files.length; i++)
    {
         if (x.files[i].size > MAX_SIZE) {
            alert('The file "'+x.files[i].name+'" has exceeded the max file size, 1GB. Please choose smaller file.');
            valid=false;
            return false; 
         }
    }

但是我不得不面对另一个问题:当我从文件对话框中选择文件时，我只在“选择”按钮附近看到“2个文件”一词，而不是所选文件的名称。那么我该怎么做才能显示所选文件的名称呢？再次感谢!

Answer 1

伙计。我在文件输入更改后进行投票，以便用户有机会立即更正。

如果我理解正确，你可以在更改事件中执行类似的操作:

var MAX = 1000000000;
if (document.forms['fileUpload']['text_input'].files[0].size > MAX) {
    valid = false;
    alert('you have exceeded the max file size, 1GB. Please choose smaller file.');
    return false; // no submit
}

希望有帮助。