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

限定上传什么文件。

现在我们开始使用插件

(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')

}

Fine Uploader特点如下:

Fine Uploader Features:

A：支持文件上传进度显示.

B：文件拖拽浏览器上传方式

C：Ajax页面无刷新.

D：多文件上传.

F：跨浏览器.

E：跨后台服务器端语言.

在Git Hub上Fine Uploader上下载打包源码,在Php Designer 8中打开其源码可以看到其源码结构如下:

2013-01-04_162943

在根目录中可以看到Client客户端调用需要使用文件.Server目录则是对应不同语言Perl/Php/Asp.net[VB]等版本实现.test目录则有包含一个完整本地Sample Demo.可供参考.

如何快速构建一个简单Demo? 其实官方在Basic-Demo-Page上已经给出一个简单的演示.这里基于Bootstrap方式构建.

首先新建一个Html空白页面.命名FineUploderDemo.html.添加如下CSS引用如下:

1: <link href="static/css/fineuploader.css" rel="stylesheet">

2: <link href="static/css/bootstrap.min.css" rel="stylesheet">

这两个文件时必须引用的.fineuploader.css则是对应下载Fine Uploder源码Client目录下.fineuploder.css 提供JS脚本中所需的CSS样式，主要包括按钮的样式、进度显示的样式以及上传结果的样式.添加JavaScript文件引用如下:

1: <script src="static/script/fineupload/header.js"></script>

2: <script src="static/script/fineupload/util.js"></script>

3: <script src="static/script/fineupload/button.js"></script>

4: <script src="static/script/fineupload/handler.base.js"></script>

5: <script src="static/script/fineupload/handler.form.js"></script>

6: <script src="static/script/fineupload/handler.xhr.js"></script>

7: <script src="static/script/fineupload/uploader.basic.js"></script>

8: <script src="static/script/fineupload/dnd.js"></script>

9: <script src="static/script/fineupload/uploader.js"></script>

其中uploder.js和uploder.basic.js则是前端的所有上传功能都在该脚本中实现.必须引用.

同时添加client目录下processing和loading两张进度显示所需要的动态图片.该图片都在fineuploder.css文件调用.

在body添加如下Code:

1: <div id="bootstrapped-fine-uploader"></div>

2: <script>

3: function createUploader() {

4: var uploader = new qq.FineUploader({

5: element: document.getElementById('bootstrapped-fine-uploader'),

6: request: {

7: endpoint: 'server/handlerfunction'

8: },

9: text: {

10: uploadButton: '<i class="icon-upload icon-white"></i>Click me now and upload a product image'

11: },

12: template:

13: '<div class="qq-uploader span12">' +

14: '<pre class="qq-upload-drop-area span12"><span>{dragZoneText}</span></pre>' +

15: '<div class="qq-upload-button btn btn-success" style="width: auto">{uploadButtonText}</div>' +

16: '<span class="qq-drop-processing"><span>{dropProcessingText}</span>'+

17: '<span class="qq-drop-processing-spinner"></span></span>' +

18: '<ul class="qq-upload-list" style="margin-top: 10pxtext-align: center"></ul>' +

19: '</div>',

20: classes: {

21: success: 'alert alert-success',

22: fail: 'alert alert-error'

23: },

24: debug: true

25: })

26: }

27:

28: window.onload = createUploader

29: </script>

这是基于Bootstrap实现对Fine Uploader最简单的前端调用.前端一般需要做两件事A:添加Css+Js文件引用.B：在Js中实例化qq.FineUploder对象.运行效果

---