Создание элемента ввода "файл" обязательно (обязательно)

Ответ 1

Благодаря HTML5 это так же просто:

<input type='file' required />

Пример:

<form>
  <input type='file' required />
  <button type="submit"> Submit </button>
</form>

Ответ 2

Вы можете сделать это с помощью Jquery следующим образом: -

<script type="text/javascript">
$(document).ready(function() {
    $('#upload').bind("click",function() 
    { 
        var imgVal = $('#uploadfile').val(); 
        if(imgVal=='') 
        { 
            alert("empty input file"); 
            return false; 
        } 


    }); 
});
</script> 

<input type="file" name="image" id="uploadfile" size="30" /> 
<input type="submit" name="upload" id="upload"  class="send_upload" value="upload" />

Ответ 3

Вы можете создать polyfill, который будет выполняться в форме submit. Например:

/* Attach the form event when jQuery loads. */
$(document).ready(function(e){

/* Handle any form submit event. */
    $("form").submit(function(e){

        e.preventDefault();                 /* Stop the form from submitting immediately. */
        var continueInvoke = true;          /* Variable used to avoid $(this) scope confusion with .each() function. */

        /* Loop through each form element that has the required="" attribute. */
        $("form input[required]").each(function(){

            /* If the element has no value. */
            if($(this).val() == ""){
                continueInvoke = false;     /* Set the variable to false, to indicate that the form should not be submited. */
            }

        });

        /* Read the variable. Detect any items with no value. */
        if(continueInvoke == true){
            $(this).submit();               /* Submit the form. */
        }

    });

});

Этот script ждет отправки формы, а затем петли, хотя каждый элемент формы, у которого есть атрибут required, имеет введенное значение. Если все имеет значение, оно отправляет форму.

Элемент, который нужно проверить, может быть:

<input type="file" name="file_input" required="true" />

(Вы можете удалить комментарии и уменьшить этот код при использовании его на своем веб-сайте)

Ответ 4

На данный момент в 2017 году я могу сделать this-

<input type='file' required />

и когда вы отправляете форму, он запрашивает файл.

Ответ 5

var imgVal = $('[type=file]').val(); 

Подобно предложению Vivek, но теперь у вас есть более общий селектор входного файла, и вы не полагаетесь на определенный идентификатор или класс.

См. демонстрацию.

Ответ 6

Все приведенные выше утверждения полностью верны. Однако злонамеренный пользователь может отправить запрос POST, не используя вашу форму, чтобы генерировать ошибки. Таким образом, HTML и JS, предлагая удобный для пользователя подход, не предотвратят подобные атаки. Для этого убедитесь, что ваш сервер дважды проверил данные запроса, чтобы убедиться, что ничего не пусто.

Ответ 7

Иногда поле ввода не связано с формой. Может показаться, что внутри тегов <form> and </form> но это за пределами этих тегов.

Вы можете попробовать применить атрибут формы к полю ввода, чтобы убедиться, что он связан с вашей формой.

<input type="file" name="" required=""  form="YOUR-FORM-ID-HERE"  />

Я надеюсь, что это помогает.