Question

在我的网站上，我想上传文件，但是默认按钮和出现文件名的位置看起来并不吸引人。因此，我的问题是如何更改其外观和位置？

Answer 1

可以将文件上载的输入设置为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 调整了外观。

出现“更改文件上传”按钮和上传文件名的目的地

1 个答案: