jQuery: как добраться, “значение” файла загружают поле ввода
Действительно ли возможно определить, выбрал ли пользователь файл для конкретного входного типа = поле "файла" с помощью javascript/jQuery?
Я разработал пользовательский тип поля для ExpressionEngine (основанный на PHP CMS), который позволяет пользователям загрузить и хранить свои файлы на Amazon S3, но самая популярная услуга хостинга EE установила max_file_uploads предел 20. Я хотел бы позволить пользователю загружать 20 файлов, редактировать запись снова для добавления еще 20, и т.д. К сожалению, после редактирования записи начальные 20 файлов имеют "замену это изображение" поле ввода файла, которое, кажется, выводит возможность из строя загрузки новых изображений. Я хотел бы удалить любые неиспользованные поля ввода файла с помощью JavaScript, когда форма отправлена.
3 ответа
Да - вы можете прочитать значение и даже привязать к событию 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 posted.
Этот загрузчик отлично подходит для моих целей: http://webdeveloperplus.com/jquery/ajax-multiple-file-upload-form-using-jquery/
Преимущество его использования в качестве основы для вашего кодирования заключается в том, что файлы загружаются асинхронно, поэтому нет нужно ограничить до 20 за раз. Есть определенное преимущество пользовательского интерфейса для выполнения загрузки во время поиска.
Изменение размера тоже довольно приятная функция, если она вам нужна!
Этот код удалит все пустые входные данные файла из формы, а затем отправит его:
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();
});
});
Example: http://jsbin.com/axuka3/