input file实现多文件上传的方法
墨初 前端设计 10003阅读
在 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多文件处理的代码,只是一个简单的示例,不能应用到正式项目中。