У меня есть поле ввода, которое находится в типе "файл".
<input type="text" name="fake_section" class="fake_section"><button class="fake_section">Choose Photo</button>
<input type="file" style="display:none;" name="file" id="file" value="Choose Photo" accept="image/png,image/jpeg" />
<input type="submit" name="submit" value="Submit" />
И я использую следующий css
input[type="file"] {
width:50%;
height:25px;
border-radius:2px;
display:inline-block;
border:thin solid #ddd;
}
я получил свой результат следующим образом
Но на самом деле я хочу, например, вывод . Еще одна проблема заключается в том, что я хочу только выбрать файлы изображений jpeg и png, но это поле ввода принимает весь тип файла. И я пробую это в обоих браузерах Firefox и Chrome
<input type="text" name="fake_section" class="fake_section">
<input type="button" class="fake_section" value="Choose Photo"/>
<input type="file" style="display:none;" name="file" id="file" value="Choose Photo" accept="image/png,image/jpeg" />
<input type="submit" name="submit" value="Submit" />
JS
$('.fake_section').click(function(e){
e.preventDefault();
$('#file').trigger('click');
});
$('#file').change(function(e){
var filename = $(this).val();
var ext = filename.split('.').pop().toLowerCase();
if( $.inArray( ext, ['gif','jpg','jpeg'] ) == -1 ){
alert('not valid!');
}
else{
$('input[name="fake_section"]').val(filename);
}
});
Попробуйте это
Чтобы ответить на второй вопрос, вы можете выбрать, какие файлы будут отображаться в открывшемся поле, используя атрибут accept
на input
.
Обратите внимание, однако, что на странице вы можете выбрать файлы png и jpeg с помощью accept="image/png,image/jpeg"
, и это не будет работать во всех браузерах. Только в Chrome на самом деле. Поэтому лучше положить accept="image/*"
(для всех файлов изображений), который работает в большинстве браузеров.
Заклинай здесь.
У вас также были проблемы с кнопкой отправки, но это было вызвано тем, что <input type="button">
не совпадает с <button>
. Никто не подчиняется, другой делает.
Вот краткий список для справки.
<input type="submit">
отправляет <input type="button">
не отправляет <button type="submit">
отправляет <button type="button">
не отправляет <button>
отправляет
Попробуйте это, чтобы проверить файл
var ext = $('#file').val().split('.').pop().toLowerCase();
if($.inArray(ext, ['gif','png','jpg','jpeg']) == -1) {
alert('invalid extension!');
}