使用 JavaScript 进行文件类型验证答案

【问题标题】：File type validation with JavaScript使用 JavaScript 进行文件类型验证
【发布时间】：2021-12-07 17:56:27
【问题描述】：

我有一个关于 JavaScript 验证的问题。每当我的脚本运行时，我都会验证<input type="file">，它会验证但也会调用操作页面。我想停止操作页面，直到验证完成。这是我的代码，任何帮助都会很棒。问候

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Image Uploading</title>
    </head>


    <body>
        <form name="xx" action="server.php" method="post" enctype="multipart/form-data" onsubmit="Checkfiles(this)">
            <input type="file" name="file_uploading" id="filename">
            <input type="submit" value="Submit" name="uploadfile">
        </form>

        <form name="view" method="post">
            <a href="view_server.php">View your uploaded Images</a>
        </form>
    </body>
</html>

<script type="text/javascript">
    function Checkfiles()
    {
        var fup = document.getElementById('filename');
        var fileName = fup.value;
        var ext = fileName.substring(fileName.lastIndexOf('.') + 1);

    if(ext =="GIF" || ext=="gif")
    {
        return true;
    }
    else
    {
        alert("Upload Gif Images only");
        return false;
    }
    }
</script>

【问题讨论】：

正如 SLaks 指出的那样，你会因为大小写而拒绝 myfile.Gif。

标签： javascript

【解决方案1】：

var fname = "the file name here.ext";
var re = /(\.jpg|\.jpeg|\.bmp|\.gif|\.png)$/i;
if (!re.exec(fname)) {
  alert("File extension not supported!");
}

【讨论】：

【解决方案2】：

通过 javascript 验证文件扩展名

function ValidateExtension() {
        var allowedFiles = [".doc", ".docx", ".pdf"];
        var fileUpload = document.getElementById("fileUpload");
        var lblError = document.getElementById("lblError");
        var regex = new RegExp("([a-zA-Z0-9\s_\\.\-:])+(" + allowedFiles.join('|') + ")$");
        if (!regex.test(fileUpload.value.toLowerCase())) {
            lblError.innerHTML = "Please upload files having extensions: <b>" + allowedFiles.join(', ') + "</b> only.";
            return false;
        }
        lblError.innerHTML = "";
        return true;
    }

提交按钮的onclick事件调用这个javascript函数。

借助 ID = lblError ，在 html 部分打印错误信息。

【讨论】：

【解决方案3】：

您可以使用File Api 来测试magic number。也许看看this answer 以了解有关验证的其他想法。比文件扩展名检查更可靠。

【讨论】：

【解决方案4】：

提交处理程序的返回值会影响提交。

onsubmit="return Checkfiles();"

这基本上是在说：

form.onsubmit = function () { return Checkfiles(); };

【讨论】：

【解决方案5】：

您需要返回 CheckFiles()

【讨论】：

【解决方案6】：

通过excel表格(.csv)上传批量数据

$("form").submit(function(){
 var val = $(this).val().toLowerCase();
var regex = new RegExp("(.*?)\.(csv)$");
if(!(regex.test(val))) {
$(this).val('');
alert('Only csv file can be uploaded');
return false;
} 

});

【讨论】：

【解决方案7】：

var _URL = window.URL || window.webkitURL;
    $("input[type=file]").change(function(e) {
        var file;
            if ((file = this.files[0])) {
                var img = new Image();
                img.onload = function () {
                    // do to on load
                };
                img.onerror = function () {
                    alert("valid format " + file.type);
                };
                img.src = _URL.createObjectURL(file);
            }
    });

【讨论】：

【解决方案8】：

一般情况下，您可以使用 JavaScript some() 方法。

function isImage(icon) {
  const ext = ['.jpg', '.jpeg', '.bmp', '.gif', '.png', '.svg'];
  return ext.some(el => icon.endsWith(el));
}

const fname = "filename.ext";
if (!isImage(fname)) {
  console.log("File extension not supported!");
}

【讨论】：

【解决方案9】：

fileValidation() 函数包含完整的文件类型验证代码。此 JavaScript 函数需要调用文件扩展名验证。

HTML

<!-- File input field -->
<input type="file" id="file" onchange="return fileValidation()"/>

<!-- Image preview -->
<div id="imagePreview"></div>

JavaScript

function fileValidation(){
    var fileInput = document.getElementById('file');
    var filePath = fileInput.value;
    var allowedExtensions = /(\.jpg|\.jpeg|\.png|\.gif)$/i;
    if(!allowedExtensions.exec(filePath)){
        alert('Please upload file having extensions .jpeg/.jpg/.png/.gif only.');
        fileInput.value = '';
        return false;
    }else{
        //Image preview
        if (fileInput.files && fileInput.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById('imagePreview').innerHTML = '<img src="'+e.target.result+'"/>';
            };
            reader.readAsDataURL(fileInput.files[0]);
        }
    }
}

fileValidation()

【讨论】：

【解决方案10】：

> html
 <input type="file" id="userfile" name="userfile" value="" class="form-control userfile" required>

> javascript
                       $(document).on('change', '.userfile', function (e) {
                        e.preventDefault();
                        const thisValue = $(this).val().split('.').pop().toLowerCase();
                        const userFile = [thisValue];
                        // Allowing file type
                        const validFile = ['csv', 'xlsx'];
                        // const intersection = validFile.filter(element => userFile.includes(element));
                        // if(intersection == ''){
                        //     $(this).val('');
                        //     alert('Please Select ' + validFile + ' file');
                        //     return false;
                        // }

                        

                       // Allowing file type
                        const allowedExtensions =  /(\.csv|\.xlsx)$/i;
                        if (!allowedExtensions.exec($(this).val())) {
                            $(this).val('');
                            alert('Please Select ' + validFile + ' file');
                            return false;
                        } 
                    });

【讨论】：