隐藏input标签,点击button标签上传文件
<div class="col-lg-9">
<button id="upload" class="btn btn-default" type="button">点击上传</button>
<input id="upload_document" type="file" style="display: none;" accept="application/pdf"/>
<span id="document_name">未上传文件</span>
</div>
点击button标签,通过js传文件名显示
$("#upload").click(function(){
$("#upload_document").click();
});
$("#upload_document").change(function(e){
var name=e.currentTarget.files[0].name;
$("#document_name").html(name);
});
效果图如下:
- 文件未上传之前:
- 点击按钮选择文件之后:
直接通过input标签onchange绑定函数无法调用外部的js文件