在前端页面进行文件的上传是平时前端开发过程经常遇到的需求,上传文件一般是根据业务需要只能接收某类后缀名格式的文件,如导入表格数据文件,只能接受xls、xlsx格式。本文总结出一种通用的方法,亲们只需要替换其中的变量即可适应自己的业务需求。
代码图:
具体代码如下:
<span id="uploadBtn">选择文件
<input type="file" class="file">
</span>
<script type="text/javascript">
/**
* 选择文件事件
*/
$("#uploadBtn [type=file]").change(function(){
var fileTypeTxt = $("#typeSelect option:selected").text();
var $this = $(this);
//合法后缀名(你只需要按照此字符串格式替换此部分内容)
var legalExts = "jpg,png,bmp,tif,gif,jpeg,pdf,doc,docx,xlsx,xls";
//获取上传文件虚拟路径 (格式一般为:"C:\fakepath\\xxx”)
var uploadPath = $this.val();
var arrFile = uploadPath.split('\\');
//上传文件的真实文件名
var realFile = arrFile[arrFile.length-1];
var arrExt = realFile.split('.');
//上传文件的真实后缀名
var realExt = arrExt[arrExt.length-1];
//如果上传的文件格式不符合要求
if(legalExts.indexOf(realExt)<0){
alert("请上传"+legalExts+"格式的文件");
}else if(!uploadPath){
return false;
} else{
//此处开始写代码处理上传文件
//......
}
</script>