在提交表单php之前检查文件扩展名

I'm trying to do immediate check on file extension before uploading it and show a message that if extension not allowed (only PDF is allowed) as the following: here is the script added to current php page:

我正在尝试立即检查文件扩展名，然后上传它并显示一条消息，如果不允许扩展名（仅允许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>

and here is the form in the body: (please not that if extension not allowed I want to show a message near to the file upload browsing button without going into the form action):

以下是正文中的表单:(请注意，如果不允许扩展名，我想在文件上传浏览按钮附近显示一条消息，而不进入表单操作）：

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

5 个解决方案

#1

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

#2

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

#3

You could try using the File API See MDN in conjunction with some basic regular expression tests like:

您可以尝试使用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>

#4

You can also try this. theForm is the id of your form

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

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;

     }

#5

Please try the following:

请尝试以下方法：

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

Into

成

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

Javascript:

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

It shows only pdf file only.

它仅显示pdf文件。