Bootstrap fileinput 控件使用说明

1.fileinput简介：

为实现文件下载功能，Bootstrap在fileinput中提供了相关下载组件。

实现效果如下如所示：

源码：https://github.com/kartik-v/bootstrap-fileinput

在线API：http://plugins.krajee.com/file-input

2.代码实现：

2.1 引入JS和CSS文件

2.2 JSP代码

导入产品


    

        

            

                
选择文件
            

                

                    
                

            
            

                关闭
                保存
        
    

2.3 JS代码

$("#impFile").fileinput({
    language: 'zh',//控件语言选择，此处为zh:汉化
    showPreview: false,//文件预览显示，默认为true:显示
    showUpload: false,//文件上传按钮显示，默认为true:显示
    elErrorContainer: '#imp-file-errors',//错误提示
    allowedFileExtensions: ["xls"],//允许选择文件格式
    uploadUrl: './product/impExcel' //Control层后台响应函数
});
/**
 * 文件导入导出响应
 */
function impEXCEL() {
    //上传文件
    $("#impFile").fileinput("upload");
    //上传失败处理
    $("#impFile").on("fileerror",
    function(event, data, msg) {
        alert("上传失败");
    });
    //上传成功处理
    $("#impFile").on("fileuploaded",
    function(event, data, previewId, index) {
        alert("上传成功");
        $("#impFile").fileinput("clear");
    });
}