在将表单提交给 PHP 之前检查文件扩展名

Question

我正在尝试在上传文件扩展名之前立即检查文件扩展名，并显示一条消息，如果不允许扩展名（仅允许PDF），如下所示：

以下是添加到当前 PHP 页面的脚本：

<script>
    function checkExt() {
        var form_valid = (document.getElementById('fileToUpload').value= "PDF");
        if(!form_valid) {
            alert('only PDF are allowed');
            return false;
        }
        return true;
    }
</script>

这是正文中的表单（请不要说，如果不允许扩展名，我想在文件上传浏览按钮附近显示一条消息，而无需进入表单操作）：

<form onsubmit='return checkExt()' action='AddPlan.php' method='POST' enctype='multipart/form-data' >
    <input type='file' value="PDF" name='fileToUpload' id='fileToUpload' required>
    <input type='submit' value='upload' name='submit' style="float:left" />
</form>

Answer 1

<script>
function checkExt(){
    var allowedFiles = [".pdf"];
    var form_valid = document.getElementById("fileToUpload");
    var regex = new RegExp("([a-zA-Z0-9s_\.-:])+(" + allowedFiles.join('|') + ")$");
    if (!regex.test(form_valid.value.toLowerCase())) {
        alert('only PDF are allowed');
        return false;
    }
    return true;
}
</script>

Answer 2

function checkExt(){
  var type = $('#fileToUpload')[0].files[0].type;
  if ($.inArray(type, ['application/pdf']) == -1) {
     return false;
  }
  return true;
}

Answer 3

您可以尝试使用 File API 请参阅 MDN 与一些基本的正则表达式测试，例如：

<script type='text/javascript'>
    function checkExt( id ){
        var fileslist = document.getElementById( id ).files;
        var valid=false;
        var type,name,size;
        var pttn_ext=/(.pdf|.PDF)/;
        var pttn_mime=/application/pdf/;
        for( var i=0; i < fileslist.length; i++ ){
            type = fileslist[ i ].type;
            name = fileslist[ i ].name;
            size = fileslist[ i ].size;
            if( pttn_ext.test( name ) && pttn_mime.test( type ) ){
                valid=true;
            }
        }
        if(!valid)alert('Only PDF files are allowed');
        return valid;
    }
</script>

<form name='pdfonly' method='post' action='AddPlan.php' onsubmit='return checkExt("fileToUpload")' enctype='multipart/form-data'>
    <h1>Only PDF File upload</h1>
    <input type='file' value="PDF" name='fileToUpload' id='fileToUpload' required>
    <input type='submit' value='submit' />
</form>

Answer 4

你也可以试试这个。 表单的 ID theForm

function checkExt(){
    var extension = theForm.fileToUpload.value.substr(theForm.fileToUpload.value.lastIndexOf('.'));
    if ((extension.toLowerCase() != ".pdf") && (extension != ""))
       {
         alert("Only PDF are allowed");
         theForm.FileUpload.focus();
         return false;
       }
        return true;
     }

Answer 5

请尝试以下操作：

<input type='file' value="PDF" name='fileToUpload' id='fileToUpload' required>

到

<input type='file' value="PDF" name='fileToUpload' id='fileToUpload' accept="application/pdf" required>

Javascript：

function checkExt(e){
    var fileName = document.getElementById('fileToUpload').value;
    var ext = fileName.substring(fileName.lastIndexOf('.') + 1);
    if(ext == "pdf" || ext == "PDF") {
        return true;
    }else{
        alert('only PDF are allowed');
        return false;                       
    }       
}

它仅显示pdf文件。