bootstrap-fileinput插件说明

大家好,第一次写博客,如有误解请尽快回复我修正！
今天给大家写一篇关于文件上传的插件 基于bootstrap的文件上传,废话不多说,直接上代码 bootstrap-fileinput文档地址: http://plugins.krajee.com/file-input
git（JS与css下载地址）地址: https://github.com/kartik-v/bootstrap-fileinput

第一步:         引入css  <link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.min.css" />
                              <link rel="stylesheet" href="./node_modules/bootstrap-fileinput/css/fileinput.min.css">
               引入html结构 <div dir=rtl class="file-loading ">
                                <input class="file1" name="file" multiple type="file"'>
                              </div>
               引入JS              <script src="./lib/jquery/jquery-1.12.4.js"></script>
                            <script src="./lib/bootstrap/js/bootstrap.min.js"></script>
                            <script src="./node_modules/bootstrap-fileinput/js/fileinput.js"></script>
                            <script src="https://cdn.bootcss.com/bootstrap-fileinput/4.3.5/js/locales/zh.min.js"></script>
注意点: 如果是多文件上传需要添加 multiple 如: <input class="file1" name="file" type="file"  multiple >
第二步:  var fileOptions = {
    language: 'zh',  // 设置语言为中文,需要下载语言包 ，我这里引入的CDN <script src="https://cdn.bootcss.com/bootstrap-fileinput/4.3.5/js/locales/zh.min.js"></script>
    rtl: true,  // 上传的图片是否从左往右布局
    uploadAsync: true,  // 是否同步上传
    dropZoneEnabled: false, // 文件是否拖拽
    allowedFileExtensions: ['jpg', 'png', 'jpeg'], // 选择文件的类型
    uploadUrl: 'http://139.224.42.104:8080/renren-fast/app/upload', // 上传的地址
    enctype: 'multipart/form-data', // 上传的类型
    maxFileCount: 1, // 最大上传的文件数
    maxFileSize: 5000, // 最大上传文件的大小(KB)(1M = 1000Kb)
    msgInvalidFileExtension: '请选择以"jpg,png,jpeg"的文件扩展名' // 文件格式不对时,显示的文字
  }
  // 当然这里还有许多配置没有说明,在这里我就不一一举列,比如(提示文本, icon小图标的修改, 样式是否显示...文档说的已经很明了了，强烈建议大家去官网看看)

第三步: API说明
1. 选择文件前的回调函数
       on('change', function () {
      console.log('上传文件之前');
    })
 2. 选择文件的回调函数
       on("filebatchselected", function (event, files) {
      console.log('选择文件了');
    })
 3. 上传文件的回调函数
         on('fileloaded', function (event, file, previewId, index, reader) {
         console.log('上传文件了')
    })
 4.   上传文件后的回调函数
       on('fileuploaded', function (event, data) {
         // data代表AJAX发送后的结果
    })
 5.  移除单个文件的回调函数
         on('filesuccessremove', function (event, id, index) {
      console.log('移除单个文件');
    })
 6.  清空文件后的回到函数
     .on('filecleared', function (event, data, msg) {
         console.log('清空文件了')
     }

列子: $('.file1')
    .fileinput(fileOptions).on('change',function() {
})
``
坑: 1. 清空文件后如果你是将文件地址存到一个数组 统一提交,记得清空文件的时候讲数组里面对应的地址也移除，说白点就是保留你需要上传的文件地址
2. 文件上传中不要提交表单(没有上传完的图片说明还没有请求回来文件对应的地址)
3. 这个插件我之前研究了一下午没有发现提交文件时数量的限制，只有限制同时上传文件的个数，就好比你这次上传了一次文件,再次上传其他几个文件,同意提交给后台没有限制