input file实现多文件上传的方法

在 html input 默认设置中，只能同时上传一个文件。如果遇到有多个文件都需要上传的情况，就显得麻烦了很多。那么这篇文章就说一说，input file 如何同时上传多个文件的方法

input multiple 属性

multiple：规定 input 输入的字段可以选择多个值

注意：使用此属性的只能 file 与 email 类型的 input 标签

语法：

<input multiple="multiple" type="file">

input file 同时上传多个文件的示例

示例1

html代码：

<form action="c.php" method="post"  enctype="multipart/form-data" >
    上传文件：
    <input type="file" name="myFile[]"  multiple="multiple" />
    <input type="submit" class="upbut" value="上传">
</form>

代码说明：

(1)、input file 加个了 multiple 属性，可以同时选择多个本地文件

(2)、name 属性的命名方式 myFile[] 数组的形式，否则后台只能得到一个上传的文件

示例2

使用 js 代码在选择本地文件时，获取所以被选择的文件名

html代码：

<script>
    function onc() {
        var files = document.getElementById("file").files;
        console.log(files);
        for (var i = 0; i < files.length; i++) {
            //打印所有的文件名
            console.log(files[i].name);
        }
    }
</script>
<form action="c".php" method="post" enctype="multipart/form-data" >
    上传文件：
    <input type="file" name="myFile" id="file" onchange="onc()" multiple="multiple" />
    <input type="submit" class="upbut" value="上传">
</form>

php接收端代码

html 前端的 input file 标签，已经设置好同时选择多个文件并上传到后端服务器了，同时后端的接收页面也要有相应的文件处理代码，这里以后端 php 多文件接收代码为例

php代码

<?php
foreach ($_FILES as $v){
    foreach ($v['name'] as $key=>$val){
        $info[$i]['name'] = $v['name'][$key];
        $info[$i]['tmp_name'] = $v['tmp_name'][$key];
        $name  =  $info[$i]['name'];
        @move_uploaded_file($info[$i]['tmp_name'],'up/'.$name);
    }
}
echo '文件上传成功';
?>

PS：这里的后端php多文件处理的代码，只是一个简单的示例，不能应用到正式项目中。