file控件怎么上传多个文件

File控件是一个必须结合服务器端功能才能实现的纯客户端控件。

要使得文件上载能够成功，要做到以下几点:

INPUT type=file 元素必须出现在 FORM 元素内。

必须为 INPUT type=file 元素指定 NAME 标签属性的值。

FORM 元素 METHOD 标签属性的值必须设置为 post。

FORM 元素 ENCTYPE 标签属性的值必须设置为 multipart/form-data。

要处理上载到服务器的文件，服务器端进程必须可以处理 multipart/form-data 的提交。例如，Microsoft Posting Acceptor 能够允许 Microsoft Internet Information Server (IIS) 接受文件上载。而在网上也可找到其它的 Common Gateway Interface (CGI) 脚本用于处理 multipart/form-data 提交。

用户选择要上载的文件并提交页面后，该文件作为请求的一部分上载。文件将被完整地缓存在服务器内存中。

File控件一次只能上传一个文件，并且其文件属性值都是只读的。采用File控件同时上传多个文件，实际上是动态生成多个File控件，每选择上传一个文件，隐藏该控件，生成另一个File控件。这里只需要简单的JavaScript技巧既可以实现，所以不做赘述。

以ASP.NET为例，介绍在服务器端所需要进行的处理。

//获取上传文件列表

HttpFileCollection fileCollection = HttpContext.Current.Request.Files

//逐个上传每个文件

for (int index = 0index <HttpContext.Current.Request.Files.Countindex++)

{

HttpPostedFile postedFile = HttpContext.Current.Request.Files[index]

filename = postedFile.FileName

if (postedFile.FileName != "")

{

postedFile.SaveAs(uploadPath)

}

}

```

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

限定上传什么文件。

---