ace_file_input检验文件的后缀

这是原来chunchun的方式来检验文件的后缀是否为excel格式(需要自己写js来判断),效果就是这种chouchou的原来的效果:
丑丑的.png
<form action="#" method="post" enctype="multipart/form-data" id="importExcel" class="form-control">
        <input type="file" id="fileUpload" name="fileUpload" label="上传Excel文件"/>
        <input id="readExcel" type="button" class="btn btn-minier btn-success" value="导入">
</form>
function checkData() {
        var fileDir = $("#fileUpload").val();
        var suffix = fileDir.substr(fileDir.lastIndexOf("."));
        if ("" == fileDir) {
            layer.alert("选择需要导入的Exce文件!", {icon: 0, title: "提示"});
            return false;
        }
        if ((".xls" != suffix && ".xlsx" != suffix)) {
            layer.alert("选择Excel格式的文件导入!", {icon: 0, title: "提示"});
            return false;
        }
        return true;
    }

找了一遍aceadmin官网,发现有文件上传的这个input的。
只需将input标签的type设置成file,然后用ace_file_input进行初始化(只设置成file是没有效果的!!!)

效果如图:

未选择文件时:

选择文件后:

点击这里可以看到效果

将input标签的type设置成file,然后用ace_file_input进行初始化
<div class="form-group col-sm-6">
    <form id="addForm" action="" enctype="multipart/form-data">
        <div class="col-xs-12">
            <div class="col-sm-12">
                 <input type="file" id="id-input-file" name="file"/>
            </div>
        </div>
    </form>
</div>
<button type="button" class="btn btn-success btn-sm" onclick="importexcel()">
    <span class="ace-icon fa fa-cloud-upload bigger-110"></span>导入
</button>
 $('#id-input-file').ace_file_input({
            no_file:'未选择文件',
            btn_choose:'选择文件',
            btn_change:'更换文件',
            droppable:true,//可拖拽上传
            allowExt: ['xls','xlsx'],//允许的文件格式
}).on('file.error.ace', function(event, info) {//不匹配上面的文件格式就会跳出弹框提示
            layer.alert("选择Excel格式的文件导入!", {icon: 0, title: "提示"});
        });

感想:关于ace_file_input的内容能够百度到的太少!

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容