Пользовательская кнопка для загрузки файлов с несколькими браузерами

Я использовал следующий код из вопроса здесь, чтобы применить пользовательский стиль к кнопкам загрузки файлов.Пользовательская кнопка для загрузки файлов с несколькими браузерами

<p id="avatar-upload"> 
    <label for="file" class="custom-file-upload"> 
     Browse Files 
    </label> 
    <input type="file" name="file" id="file" /> 
    <input type="submit" name="upload" id="upload" value="<?php esc_attr_e('Upload Image', 'buddypress'); ?>" /> 
    <input type="hidden" name="action" id="action" value="bp_avatar_upload" /> 
</p>

КНБ:

input[type="file"] { 
    display: none; 
}

я могу нажать на этом лейбле, и он вызывает модальный загрузки файла. Однако, когда я выбираю файл и нажимаю OK, имя файла больше не отображается в интерфейсе, поэтому пользователь не знает, чтобы нажать «Загрузить изображение». Я тестировал в Firefox и Chrome тот же результат.

источник

2015-04-15 Ian Butler

вы сказали: «Я можно щелкнуть по этой метке, и она откроет файл загружать модальные. Однако, когда я выбираю файл и нажимаю OK, ничего не происходит. ». Связали ли вы эту кнопку с событием клика? Кнопка и модальный динамически генерируются, а это означает, что когда начальная DOM была создана, их там не было. быть делегированным новой структуре DOM – Sai

Спасибо за предложение. Кажется, он работает, но не отображает имя файла на интерфейсе, что меня смутило. Я отредактировал исходный вопрос, чтобы отразить это. –

Я сделал это несколько недель назад. Надеюсь, поможет.

Codepen: http://codepen.io/mbrillaud/pen/dPdKOG

HTML:

<div class="wrapper"> 
    <h1>Stylized file input</h1> 
    <label class="mybutton" for="fileupload">Button</label> 
    <input class="fileupload" id="fileupload" type="file"/> 
    <p id="fileinfo"><span></span></p> 
</div>

SCSS:

$wetAsphalt: #34495e; 
$pumpkin: #d35400; 
$clouds: #ecf0f1; 
$width: 300px; 

body{ 
    font-family: arial, sans-serif; 
    background-color: $wetAsphalt; 
} 

.wrapper{ 
    width: $width; 
    padding: 12px; 
    background-color: $clouds; 
    margin: 0 auto; 
    @include border-radius(5px); 

    .fileupload{ 
     visibility: hidden; 
    } 
    .mybutton{ 
     display: block; 
     width: 100px; 
     text-align: center; 
     margin: 0 auto; 
     border-radius: 2px; 
     padding: 6px; 
     background-color: $pumpkin; 
     font-size: 32px; 
     color: white; 
     cursor: pointer; 
     @include user-select(none); 
    } 

    #fileinfo{ 
    height: 20px; 
    text-align: center; 
    } 
}

JS (только, чтобы получить входное значение):

$('#fileupload').on('change', function(){ 
    $('#fileinfo').text($(this).val()); 
});

источник

2015-04-15 15:10:27

@Mehidi Спасибо это выглядит великолепно, JS должен сделать трюк –

Добро пожаловать, рад, что это помогло :) –

Не знаю, поможет ли это, но для моих загрузок я использовал скрипт под названием «uploadifive», который он загружает в определенную область на вашем веб-сервере и позволяет затем создать систему просмотра файлов для просмотра загружаемых изображений.

Также есть кнопка, связанная с событием?

EDIT :: JUST ЗАМЕТИЛ замечание SAI

источник

2015-04-15 15:01:08 DGTLSS

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

По умолчанию входной файл выглядит по-разному в разных браузерах, и, следовательно, внешний вид веб-страницы портит эстетику. Мы сделали входной файл, скрытый в невидимом диапазоне, и пользовательскую кнопку, которая появляется пользователю. видимая кнопка будет иметь действие onclick, которое программным образом нажимает на поле скрытого входного файла.

Это старое решение, но что-то лучшее может существовать в течение нескольких дней.

источник

2015-04-15 15:05:13

Пользовательская кнопка для загрузки файлов с несколькими браузерами

ответ

Смежные вопросы