JQuery: как получить "значение" поля ввода файла

Можно ли определить, выбрал ли пользователь файл для определенного поля input type="file" с помощью javascript/jQuery?

Я разработал настраиваемый тип поля для ExpressionEngine (на основе PHP CMS), который позволяет пользователям загружать и хранить свои файлы на Amazon S3, но самая популярная служба хостинга EE установила ограничение max_file_uploads в 20. Я бы хотел разрешить пользователю загрузить 20 файлов, отредактировать запись еще раз, чтобы добавить еще 20 и т.д. К сожалению, при редактировании записи в начальных 20 файлах есть поле ввода "заменить это изображение", которое, похоже, выбивает возможность загрузки новых изображений. Я хотел бы удалить любые неиспользуемые поля ввода файла через javascript при отправке формы.

Ответ 1

Да - вы можете прочитать значение и даже привязать к событию change, если хотите.

<html>
<head>
  <title>Test Page</title>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript">
  $(function()
  {
    $('#tester').change( function()
    {
      console.log( $(this).val() );
    });
  });
  </script>
</head>

<body>

<input type="file" id="tester" />

</body>
</html>

Но есть и другие решения с множеством загрузок, которые могут удовлетворить ваши потребности лучше, например, bpeterson76.

Ответ 2

Этот код удалит все пустые входные файлы из формы и затем отправит их:

HTML:

<form action="#">
  <input type="file" name="file1" /><br />
  <input type="file" name="file2" /><br />
  <input type="file" name="file3" /><br />
  <input type="file" name="file4" /><br />
  <input type="file" name="file5" /><br />

  <input type="submit" value="Submit" />
</form>

JavaScript:

$(function() {
  $("form").submit(function(){
    $("input:file", this).filter(function(){
      return ($(this).val().length == 0);
    }).remove();
  });
});

Пример: http://jsbin.com/axuka3/

Ответ 3

Этот загрузчик отлично работает для моих целей: http://webdeveloperplus.com/jquery/ajax-multiple-file-upload-form-using-jquery/

Преимущество использования этого в качестве основы для вашего кодирования заключается в том, что файлы загружаются асинхронно, поэтому не нужно ограничивать 20 за раз. Там определенный пользовательский интерфейс дает преимущество при загрузке во время поиска пользователя.

Изменение размера также довольно приятная функция, если вам это нужно!