前言:前端上传文件,有好几种方式,可以使用原生的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上传文件
如果使用这个插件的话,上传文件的写法可以相对比较自由了,可以指定触发按钮,可以异步上传,对于后端程序员还是很友好的。