как проверить, выбран ли файл с помощью javascript?

в php вот как вы бы проверили, выбран ли файл:

$_FILES['item']['size']>0

Как насчет JavaScript?

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

3 ответов


http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-49531485 говорит:

значение типа DOMString
Когда атрибут type элемента имеет значение "text"," " или "пароль", представляет текущее содержимое соответствующего элемента управления формы в интерактивном агенте пользователя.
<html>
  <head><title>...</title>
    <script type="text/javascript">
      function foo() {
        var f = document.getElementById("f1");
        alert( ""==f.value ? "nothing selected" : "file selected");
      }
    </script>
  </head>
  <body>
    <form>
      <div>
        <input id ="f1" type="file" name="x" />
      </div>
    </form>
    <button onclick="foo()">click</button>
  </body>
</html>

Я использую этот javascript:

var file_selected = false;
function showNoFile() {
    if(!file_selected) { alert('No file selected!'); } // or anything else
}

С этим html для кнопки файла:

<input type='file' onchange="file_selected = true;" ...>
....
<input type='submit' onclick='showNoFile();'>

надеюсь, что помогает!


Итак, скажем, у вас есть html-форма, и у вас есть пользовательский ввод загрузки файла:

<label for="imageUploadButton">
<span class="btn" style="padding-left: 10px;">Click here for uploading a new picture</span>
</label> 
<input type="file" name="avatar_picture" accept="image/gif,image/jpeg,image/png" id="imageUploadButton" style="visibility: hidden; position: absolute;">

и вы хотите проверить имя файла, который пользователь выбрал / выбрал:

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

<script type="text/javascript">
  $(function() {
     $("input:file").change(function (){
       var fileName = $(this).val();
       alert(fileName); //Do with the filename whatever you want
     });
  });
</script>

@https://stackoverflow.com/a/5670938/2979938

для тех, кто использует requireJS:

$("input:file").change(function () {
  var fileName = $(this).val();
  alert(fileName); //Do with the filename whatever you want
});