上传文件插件-bootstrap-fileinput

1. js文件：

    <link href="/bootstrap/css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
          media="all" rel="stylesheet" type="text/css"/>
    <link href="/bootstrap/themes/explorer-fa/theme.css" media="all" rel="stylesheet" type="text/css"/>

    <script src="/js/bootstrap/jquery-2.1.4.min.js"></script>

    <!--<script src="/bootstrap/js/locales/fr.js" type="text/javascript"></script>-->
    <!--<script src="/bootstrap/js/locales/es.js" type="text/javascript"></script>-->

    <script src="/bootstrap/js/fileinput.js" type="text/javascript"></script>
    <script src="/bootstrap/themes/fa/theme.js" type="text/javascript"></script>

 

2. demo

<!--修改头像-->
<div id="updateImgDialog">
    <form enctype="multipart/form-data" method="post" action="/user/uploadHeadImg">
        <div class="form-group">
            <div class="file-loading">
                <input id="file-4" name="img" type="file" class="file">
                <p class="help-block">支持jpg、jpeg、png、gif格式，大小不超过2.0M</p>
            </div>
        </div>
    </form>
</div>

<script>
    $("#file-4").fileinput({
        theme: "explorer", //主题
        language: 'zh',
        uploadUrl: "/user/uploadHeadImg",// 上传请求路径
        allowedFileExtensions: ['jpg', 'gif', 'png', 'jpeg', 'pdf'],//允许上传的文件后缀
        uploadAsync: false, //是否允许异步上传
        showUpload: false,//是否显示上传按钮
        showCaption: false,//是否显示容器dropZoneEnabled: false,//是否显示拖拽区域
        removeFromPreviewOnError: true,//是否移除校验文件失败的文件
        uploadExtraData: function (previewId, index) {   //额外参数 返回json数组
            return {
                'id': 1  // <span style="font-family:Arial, Helvetica, sans-serif;">commId 为全局变量，可以给控件上传额外参数  </span>

            };
        },
        layoutTemplates: {    //取消上传按钮
            actionUpload: '',
        },
        showPreview: true,      //显示预览
        minFileCount: 1,   //最低文件数量
        maxFileCount: 1,   //最多文件数量
        maxFileSize: 512,  //允许文件上传大小
        overwriteInitial: true,
        previewFileIcon: '<i class="fa fa-file"></i>',
        initialPreviewAsData: true, // defaults markup
        preferIconicPreview: false, // 是否优先显示图标  false 即优先显示图片
        previewFileIconSettings: { // configure your icon file extensions
            'pdf': '<i class="fa fa-file-pdf-o text-danger"></i>',
            'jpg': '<i class="fa fa-file-photo-o text-danger"></i>',
            'gif': '<i class="fa fa-file-photo-o text-muted"></i>',
            'png': '<i class="fa fa-file-photo-o text-primary"></i>',
            'jpeg': '<i class="fa fa-file-photo-o text-primary"></i>'
        },
    });
    $("#file-4").fileinput();
    $("#file-4").on("filebatchuploadsuccess", function (event, data, previewId, index) {
        if (data.response == true) {
            alert("上传成功")
            imgDialog.close()
        }
        var result = data.response.result;//接收后台返回的数据
//            console.log(data)
//            console.log(previewId)
//            console.log(index)
//            $.each(result, function (i, item)  //each函数会遍历从后台返回的错误信息
//            {
//                if (item.error != null) { abp.message.warn(item.error); return; }
//            });
//            $("#input-ke-2").fileinput('reset'); //重置上传控件（清空已文件）
//            abp.notify.info("提交成功");
    });
</script>