上传文件的前端的几种显示方式

前言：前端上传文件，有好几种方式，可以使用原生的input标签像第一种方式那样简单，也可以通过其他方式间接的触发选择文件上传文件的方式。

1、基于原生的input标签

上传文件，可以做的很简单就像这样

直接在页面中添加这样一段代码即可实现，将input标签的类型设置为file即可完成设置

<input type="file" id="file" name="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg">

2、通过a标签渲染上传文件按钮使之更美观

<a href="#jav:;" class="file"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                            <input type="file" id="file" name="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"></a>

这里的设置a标签的样式覆盖input标签既可完成，可以设置成以下的样子

3、还可以通过一个按钮事件触发文件上传按钮

<input id="upfile" name="myfile" type="file" style="display: none;"/>
<a class="listbtn save" onclick="submitapp();" >新增附件</a>
<script>
function submitapp() {
   $("#upfile").click();
}
</script>

4、还可以使用框架实现文件上传

layui上传文件
如果使用这个插件的话，上传文件的写法可以相对比较自由了，可以指定触发按钮，可以异步上传，对于后端程序员还是很友好的。