Хобрук: Ваш путь к мастерству в программировании

загрузить проверку страницы файла с помощью javascript

Это страница загрузки файла:

<input type="file" id="fileUpload" />
<input type="submit" value="Upload File" style="margin: 40px 0 0 160px"/>
<div id="fileSelect" style="color:Red;display:none">No file selected for uploading.</div>
<div id="fileFormat" style="color:Red;display:none">Invalid File Format. Only .xlsx, .xls, and .xlt file format allowed.</div>
</form>

This is the JavaScript validation:

<script>
var _validFileExtensions = [".xlsx", ".xls", ".xlt"]; 
function Validate(oForm) {
if( document.getElementById("fileUpload").files.length == 0 ){
     document.getElementById("fileSelect").style.display=""; 
    return false;
}

    var arrInputs = oForm.getElementsByTagName("input");
    for (var i = 0; i < arrInputs.length; i++) {
        var oInput = arrInputs[i];
        if (oInput.type == "file") {
            var sFileName = oInput.value;
            if (sFileName.length > 0) {
                var blnValid = false;
                for (var j = 0; j < _validFileExtensions.length; j++) {
                    var sCurExtension = _validFileExtensions[j];
                    if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
                        blnValid = true;
                        break;
                    }
                }

                if (!blnValid) {
                    document.getElementById("fileFormat").style.display="";
                    return false;
                }
            }
        }
    }

    return true;
}  

</script>

Теперь проблема происходит

когда я нажимаю кнопку Загрузить, я получаю следующее сообщение:

Не выбран файл для загрузки.

Теперь я не обновляю страницу, ищу недопустимый файл и нажимаю Загрузить. Теперь он показывает:

Не выбран файл для загрузки.

Недопустимый формат файла. Допускаются только форматы файлов .xlsx, .xls и .xlt.

Я хочу, чтобы предыдущее сообщение не отображалось. Он должен отображать только:

Недопустимый формат файла. Допускаются только форматы файлов .xlsx, .xls и .xlt.

Но также отображается следующее сообщение

Не выбран файл для загрузки


Ответы:


1

Вы никогда не сбрасываете значение display на скрытое, поэтому независимо от того, что после его изменения на пустую строку оно не изменится обратно... Попробуйте следующее:

if( document.getElementById("fileUpload").files.length == 0 ){
     document.getElementById("fileSelect").style.display=""; 
    return false;
}
else {
     document.getElementById("fileSelect").style.display="none"; 
}        
06.07.2015
  • Спасибо. проверю 06.07.2015
  • Новые материалы

    Учебные заметки JavaScript Object Oriented Labs
    Вот моя седьмая неделя обучения программированию. После ruby ​​и его фреймворка rails я начал изучать самый популярный язык интерфейса — javascript. В отличие от ruby, javascript — это более..

    Разбор строк запроса в vue.js
    Иногда вам нужно получить данные из строк запроса, в этой статье показано, как это сделать. В жизни каждого дизайнера/разработчика наступает момент, когда им необходимо беспрепятственно..

    Предсказание моей следующей любимой книги 📚 Благодаря данным Goodreads и машинному обучению 👨‍💻
    «Если вы не любите читать, значит, вы не нашли нужную книгу». - J.K. Роулинг Эта статья сильно отличается от тех, к которым вы, возможно, привыкли . Мне очень понравилось поработать над..

    Основы принципов S.O.L.I.D, Javascript, Git и NoSQL
    каковы принципы S.O.L.I.D? Принципы SOLID призваны помочь разработчикам создавать надежные, удобные в сопровождении приложения. мы видим пять ключевых принципов. Принципы SOLID были разработаны..

    Как настроить Selenium в проекте Angular
    Угловой | Селен Как настроить Selenium в проекте Angular Держите свое приложение Angular и тесты Selenium в одной рабочей области и запускайте их с помощью Mocha. В этой статье мы..

    Аргументы прогрессивного улучшения почти всегда упускают суть
    В наши дни в кругах веб-разработчиков много болтают о Progressive Enhancement — PE, но на самом деле почти все аргументы с обеих сторон упускают самую фундаментальную причину, по которой PE..

    Введение в Джанго Фреймворк
    Схема «работать умно, а не усердно» В этой и последующих статьях я познакомлю вас с тем, что такое фреймворк Django и как создать свое первое приложение с помощью простых и понятных шагов, а..