Bootstrap ввод файла по-прежнему показывает все файлы - PullRequest
1 голос
/ 15 апреля 2020

Даже если я напишу поддерживаемые расширения в атрибуте accept, при просмотре есть опция наряду с поддерживаемыми типами (.jpg, .gif, .png), которая говорит «все файлы (*)», в которой перечислены все файлы. введите этот каталог.

<input type="file" accept=".jpg,.gif,.png" />

Есть ли способ удалить эти "все файлы"? Спасибо

1 Ответ

1 голос
/ 17 апреля 2020

Использование

<input type="file" accept="image/*">

Показывает все файлы изображений. Но вы не можете удалить Все файлы из файла, выбрав windows раскрывающийся список. Если вы хотите ограничить определенные типы файлов, вам необходимо отфильтровать / проверить их с помощью сценария.

var validExtens = [".jpg", ".jpeg", ".bmp", ".gif", ".png"];   //valid extensions 
function ValidateFile(oForm) {
    var Inputs = oForm.getElementsByTagName("input");
    for (var i = 0; i < Inputs.length; i++) {
        var oInput = Inputs[i];
        if (oInput.type == "file") {
            var fName = oInput.value;
            if (fName.length > 0) {
                var validExten = false;
                for (var j = 0; j < validExtens.length; j++) {
                    var tmpExten = validExtens[j];
                    if (fName.substr(fName.length - tmpExten.length, tmpExten.length).toLowerCase() == tmpExten.toLowerCase()) {
                        validExten = true;
                        break;
                    }
                }
                // if extension is invalid
                if (!validExten) {
                    alert( "Invalid File Extension!");
                    return false;
                }
            }
        }
    }
  
    return true;
}
<form onsubmit="return ValidateFile(this);">
  <input type="file" name="my_file" accept="image/*"/><br />
  <input type="submit" value="Submit" />
</form>
...