bootstrap 多文件上传

bootstrap 多文件上传,第1张

```

<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"]'

限定上传什么文件。

最近因为项目需要用到了bootstrap fileinput的'插件,在使用苹果手机上传图片预览时,发现图片方向和手机本地存储方向不一致问题。后来通过查询资料了解图片具有EXIF(Exchangeable Image File Format)旋转属性标识,fileinput对旋转进行了处理。预览图片显示的为电脑图片存放方向。

用iPhone手机通过home键朝向四个不同的方向进行拍照后,上传照片显示与预览图片方向并不一致。有点不明白其中缘由,后来发现了规则,只有Home键朝下和朝上的时候才会发现显示不一致问题。解决方案如下:

fileinput.css、fileinput.min.css文件中,css样式旋转角度存在问题,修改以下样式就可以啦。Home键朝下拍摄

.rotate-6 { /*transform: rotate(90deg)原代码*/ transform: rotate(270deg)}

Home键朝上拍摄

.rotate-8 { /*transform: rotate(270deg)原代码*/ transform: rotate(90deg)}


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/tougao/12104265.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-21
下一篇 2023-05-21

发表评论

登录后才能评论

评论列表(0条)

保存