Question

我有一个表单，允许用户输入文本并上传至少一个文件，文件大小小于1GB。点击＆＃34;提交＆＃34;按钮的形式，此要求将通过javascript验证。但是，当我添加文件验证时，它没有任何响应来显示文件的名称和大小，特别是如果文件超过1GB。

以下哪种方法会更好？

选择文件后检查文件大小，如果文件大小超过1GB，会有一个警告告诉用户文件太大，需要再次选择。
选择文件后，点击＆＃34;提交＆＃34;按钮，在继续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编辑：

现在检查文件＆＃39;尺寸可按如下方式完成：

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

然后我不得不面对另一个问题：当我从文件对话框中选择文件时，我只看到了＆＃34; 2个文件＆＃34;靠近＆＃34;选择＆＃34;按钮，而不是所选文件的名称。那么我该怎样做才能使所选文件＆＃39;名字可以显示？再次感谢！

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
}

希望它有所帮助。

Answer 2

由于您的文件选择属于多种类型，您需要迭代文件数组并检查每个文件的大小

function validate_form(){

var MAX_SIZE = 1000000000;
var myForm=document.forms['fileUpload']

//other field validations   

for(var file in myForm['upload_file[]'].files)
     if (file.size > MAX) {
        alert('you have exceeded the max file size, 1GB. Please choose smaller file.');
        return false; 
     }
}


}

具有多个文件和其他输入字段的表单验证

2 个答案: