Изменение появления кнопки загрузки файла и места назначения имени загруженного файла - PullRequest
Новая
       4

Изменение появления кнопки загрузки файла и места назначения имени загруженного файла

0 голосов
/ 23 ноября 2018

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

1 Ответ

0 голосов
/ 23 ноября 2018

Вход для загруженного файла может быть установлен на display: none, чтобы он больше не отображался, но все еще функционирует.После этого, с JQuery или Javascript, другая кнопка может быть использована для запуска кнопки загрузки файла при нажатии.Для перенаправления имени файла в другое место я использовал Javascript, чтобы получить элемент input[type='file'] при изменении и удалить из него имя файла, как показано ниже: 

<div class="form-group">
            <label>File upload</label>
            <input name="file" type="file" class="file-upload-default">
            <div class="input-group col-xs-12">
                <p id="id_uploaded_file" class="form-control file-upload-info"><span class="text-muted" >Uploaded file's full name</span></p>
                <span class="input-group-append">
                    <input id="id_file" type="file" name="file" class="file-upload-browse btn btn-gradient-primary" style="display: none;" required />
                    <button type="button" id="id_button_upload" class="file-upload-browse btn btn-gradient-primary">Upload</button>
                </span>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function () {
        $('#id_button_upload').click(function () {
            $('#id_file').click();
        });

        (function(){

            // Attach the change event listener to change the label of all input[type=file] elements
            var els = document.querySelectorAll("input[type=file]"),
                i;
            for (i = 0; i < els.length; i++) {
                els[i].addEventListener("change", function() {
                    var label =document.getElementById('id_uploaded_file');
                    label.innerHTML = this.files[0].name;
                });
            }

        })();
    });

</script>

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

...