Не получается стилизовать input type="file" не подхватывается плагин jquery.fileinput.min.js

Question

Решил я попробовать стилизовать input type="file" для своего проигрывателя. Нашел разные статьи и решил прибегнуть к самому простому способу через jquery Но почему-то стандартная кнопка Выберите файл и файл не выбран все равно отображаются. что я делаю не так подскажите. Пробовал разный порядок следования скриптов в index.html Если порядок такой

<script src="app.js"></script> 
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <script type="text/javascript" src="https://raw.githubusercontent.com/javanto/jquery-fileinput/3.1.0/dist/jquery.fileinput.min.js"></script>    
    </head>
    <body>
    <input type="file" name="mediafile" />
    <button id="replacement" class="btn"></button>

Выдает ошибку:

Uncaught ReferenceError: $ is not defined
    at app.js:1

Если поставлю app.js последним в списке:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
            <script type="text/javascript" src="https://raw.githubusercontent.com/javanto/jquery-fileinput/3.1.0/dist/jquery.fileinput.min.js"></script>
<script src="app.js"></script>

Выдает следущее:

app.js:2 Uncaught TypeError: $(...).fileinput is not a function
    at HTMLDocument.<anonymous> (app.js:2)
    at f (jquery.js:1026)

Если напрямую код из app.js пропишу в index.html как написано в источнике https://github.com/javanto/jquery-fileinput

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <script type="text/javascript" src="https://raw.githubusercontent.com/javanto/jquery-fileinput/3.1.0/dist/jquery.fileinput.min.js"></script>
        <script type="text/javascript">
        <!-- //<![CDATA[
        $().ready(function() {
          $("input[type=file][name=mediafile]").fileinput($("#replacement").remove());
        //]]>
        </script>

Появляется ошибка Uncaught SyntaxError: Unexpected end of input в строчке, где заканчивается скрипт </script>

Вот содержимое app.js:

$(document).ready(function() {
    $("input[type=file][name=mediafile]").fileinput($("#replacement").remove());
});

Вот файл style.css:

.fileinput:hover, .fileinput.hover {
    color: #ff00ff;
}

.fileinput:focus, .fileinput.focus {
    color: #00ff00;
}

.fileinput:active, .fileinput.active {
    color: #ff0000;
}

button.btn {
    border: 0;
    color: #ffffff;
    background:#fff url(img/choose_a_file.png) no-repeat;
    width: 60px;
    height: 40px;
}

Почему он не цепляет плагин jquery.fileinput.min.js пожалуйста подскажите?

Answer 1

скрипт не нужен там

<label id="replacement" for="mediafile"></label>
<input style="display:none" id="mediafile" type="file" />

а в стилях настроить #replacement как кнопку

БЛОГ НА HUSL

Не получается стилизовать input type="file" не подхватывается плагин jquery.fileinput.min.js

Ответы (1 шт):