导入文件时，文本框如何显示导入文件的名字（innerHTML）

如这个导入按钮在导入文件时如何显示文件名？就像这样：

给该文件按钮增加个事件监听就好了。

按钮是这样的：

<div class="container">
    <form action="/doGet.action" method="post">
            <label class="col-md-1 control-label">
                File
                <span class="required">*</span>
            </label>
            <div class="fileinput-holder input-group input-medium">
                <div id="uploadFile" class="fileinput-preview uneditable-input form-control"
                     style="width:0.5%;cursor:text;text-overflow:ellipsis;">
                    No file selected...
                </div>
                <div class="input-group-btn">
                    <span class="fileinput-btn btn" style="overflow: hidden; position: relative; cursor: pointer;">
                        Browse...
                        <input class="required has-success" name="file1" accept="*/*" data-style="fileinput"
                                data-inputsize="medium"
                               style="position:absolute;top:0px;right:0px;
                               margin: 0px;cursor: pointer;font-size: 99px;opacity: 0;" type="file" onchange="loadFile(this.files[0])">

                    </span>
                </div>
            </div>
            <input type="submit" value="upload" class="btn btn-primary pull-right">
    </form>
</div>

增加onchange事件：

function loadFile(file){
    document.getElementById('uploadFile').innerHTML=file.name;
}

这样，通过绑定事件就可以，实现导入文件时文本框里显示导入的文件名。