上传文件插件-bootstrap-fileinput

<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>

<!--修改头像-->
<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>