bootstrap 多文件上传

```

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

现在我们开始使用插件

(1)首先引入文件

<!--css文件-->

<link href="__PUBLIC__/css/fileinput.css" media="all" rel="stylesheet" type="text/css" />

<link href="__PUBLIC__/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">

<!--js文件-->

<script src="__PUBLIC__/js/jQuery.min.js" type="text/JavaScript"></script>

<script src="__PUBLIC__/js/bootstrap.min.js?v=3.3.6"></script>

<script src="__PUBLIC__/js/plugins/fileinput.js" type="text/javascript"></script>

<script src="手亏__PUBLIC__/js/fileinput.min.js" type="text/javascript"></script>

(2)初始化控件

<input id="file" name="file_data[]" type="file" multiple data-preview-file-type="any" data-show-caption="true">

data-preview-file-type="any" ：设置之后可以上传多个文件

name="file_data[]" ：因为要上传多个文件所以要用数组

(3)js初始化控件

$("#file").fileinput({

uploadUrl: "{:U('Admin/Img/imgupload2')}",// 上传路径

uploadAsync: false,//是否异步传输

maxFileCount: 5//最大文件上传数量

}).on('filebatchpreupload', function(event, data, id, index) {

}).on('filebatchuploadsuccess', function(event, data) {//上传成功从服务器端返回的数据（即保存的文件名称）

for(var i=0i<data.response.lengthi++){

alert(data.response[i].flag)

}

})

(4)thinkphp对应的方法

public function imgupload2(){

$upload = new \Think\Upload()// 实例化上传类

$upload->maxSize = 3145728 // 设置附件上传大小

$upload->exts = array('jpg', 'gif', 'png', 'jpeg')// 设置附件上传类型

$upload->rootPath = './Public/Uploads/档闷'// 设置附件上传根目录

$upload->savePath = ''// 设置附件上传（子）目录

$info = $upload->upload(array($_FILES['file_data']))// 上传文件

$i=0

if(!$info) {// 上传错误提示错误信息

$a[$i]['flag']="no"

$this->ajaxReturn($a,'JSON')

}else{// 上传成功 获取上传文件信息行薯弯

foreach($info as $file){

$a[$i]['flag']=$file['savepath'].$file['savename']

$i++

}

}

$this->ajaxReturn($a,'JSON')

}

---