bootstrap---fileinput 插件使用

1、导入样式：

     <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-fileinput/4.4.7/css/fileinput.css">

     <script src="https://cdn.bootcss.com/bootstrap-fileinput/4.4.7/js/fileinput.js"></script>

     <script src="https://cdn.bootcss.com/bootstrap-fileinput/4.4.7/js/locales/zh.min.js"></script>    

2、手写js：

     <script type="text/javascript">
        $(document).ready(function() {
            $("#userImg").fileinput({

                language: 'zh', //设置语言

                uploadUrl:"http://127.0.0.1/testDemo/fileupload/upload.do", //上传的地址

               allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀

               //uploadExtraData:{"id": 1, "fileName":'123.mp3'},

                uploadAsync: true, //默认异步上传

扫描二维码关注公众号，回复： 2607482 查看本文章

                showUpload:true, //是否显示上传按钮

                showRemove :true, //显示移除按钮

                showPreview :true, //是否显示预览

                showCaption:false,//是否显示标题

                browseClass:"btn btn-primary", //按钮样式    

               dropZoneEnabled: false,//是否显示拖拽区域

               //minImageWidth: 50, //图片的最小宽度

               //minImageHeight: 50,//图片的最小高度

               //maxImageWidth: 1000,//图片的最大宽度

               //maxImageHeight: 1000,//图片的最大高度

                //maxFileSize:0,//单位为kb，如果为0表示不限制文件大小

               //minFileCount: 0,

                maxFileCount:10, //表示允许同时上传的最大文件个数

                enctype:'multipart/form-data',

               validateInitialCount:true,

                previewFileIcon: "<iclass='glyphicon glyphicon-king'></i>",

               msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",

         });

3、jsp调用

      <div class="file-loading">
                <input id="userImg" type="file">
       </div>
      <div id="img-file"></div>