更改文件上载按钮显示和上载文件名的目标

文件上传输入可以设置为 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 .