Как стилизовать файл типа ввода с помощью CSS

Question

Как стилизовать файл типа ввода с помощью CSS

0

У меня есть поле ввода, которое находится в типе "файл".

     <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

neel 17 янв. 2014, в 06:33

Источник

Теги:

jquery

html

css

3 ответа

1

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

См. Официальную ссылку W3C.

Обратите внимание, однако, что на странице вы можете выбрать файлы 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> отправляет

Mr Lister 17 янв. 2014, в 04:34

1

Попробуйте это, чтобы проверить файл

var ext = $('#file').val().split('.').pop().toLowerCase();
if($.inArray(ext, ['gif','png','jpg','jpeg']) == -1) {
   alert('invalid extension!');
}

Amit 17 янв. 2014, в 02:42

Ещё вопросы

jogesh_pi · Accepted Answer · 2014-01-17T02-58-00.000Z

<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);
    }
});

Попробуйте это

http://jsfiddle.net/jogesh_pi/5WcFj/2/

но здесь никакие файлы не выбраны в texbox ??
@Parvathiiiii проверить обновленные коды
@Parvathiiiii не забудьте отметить это близко. ;)
Но у меня есть вопрос, могу ли я разместить файл из формы в модель, используя этот способ
@Parvathiiiii, да, потому что, потому что я просто скрываю тип файла, форма определенно передает информацию о типе файла.
но в моем случае, когда нажмете, чтобы выбрать фотографию, она сразу перейдет к кнопке отправки без выбора фотографии? !!
давайте продолжим это обсуждение в чате
<input type = "button" class = "fake_section" value = "Choose Photo" /> решает мою проблему