bootstrap 多文件上传

Posted 2023-03-22

参考技术A ```

<link href="/static/backend/css/fileinput.css" rel="stylesheet" />

 <script src="/static/backend/js/fileinput.js"></script>

 <link href="/static/backend/css/fileinput.min.css" rel="stylesheet" />

 <script src="/static/backend/js/fileinput.min.js"></script>

      <div class="file-loading">

        <input type="file" id="myfile" name="myfile[]" multiple data-allowed-file-extensions='["csv"]'/>//只能是csv 文件。 name=myfile[] 可以上传多个文件

       </div>

 </div>

Js

 $("#myfile").fileinput(

uploadUrl: "/backend/home/upload", //上传地址

uploadAsync: false, //设置上传同步异步 此为同步

            showUpload: true,

            showRemove: true,

         //   showClose: true,

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

          /*  layoutTemplates:

                actionDelete: ''

            ,

            browseClass: 'btn btn-primary'*/

        );

后台/backend/home/upload

 public function upload()

        var_dump($_FILES['myfile']);

      foreach ($_FILES["myfile"]['tmp_name'] as$k =>$v)

                   move_uploaded_file($v,ROOT_PATH.'public'.DS.'uploads'.DS.$_FILES['myfile']['name'][$k]);

Uploads要自己创建好文件夹

            

        return 1; // 上传后要返回1

    

```

<input type="file" id="myfile" name="myfile" multiple 控制可以上传多个 data-allowed-file-extensions='["csv"]'/>

 当点击上传后，报错，提示你必须选择最少X个文件上传。

input标签元素属性：data-min-file-count="2" 设置为X个文件，限制上传文件数。

data-allowed-file-extensions= '["csv"]'

限定上传什么文件。