Проверка типа файла с помощью Javascript

У меня есть вопрос относительно проверки 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>
Источник

10 ответов 

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

Вы можете использовать File Api для проверки магического числа. Может быть, посмотрите на этот ответ для других идей о проверке. Надежнее, чем проверка расширения файла.

Источник

Проверка расширения файла через 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.

Источник

В общем, для этого вы можете использовать метод javascript some ().

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

let fname = "the file name here.ext";
if (!isImage(fname)) {
  alert("File extension not supported!");
}

Источник

Возвращаемое значение обработчика отправки влияет на отправку.

onsubmit="return Checkfiles();"

Это в основном говорит:

form.onsubmit = function () { return Checkfiles(); };
Источник

Вам нужно вернуть CheckFiles()

Источник 
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);
            }
    });
Источник

Функция 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()
Источник

Загружать объемные данные через лист 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;
} 

});

Источник 
      > 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;
                        } 
                    });
Источник
Другие вопросы по тегам