HTML5实现多文件多图上传实例

时间：2022-06-25 18:23:22 编辑：袖梨来源：一聚教程网

研究了半天发现html5其实特别简单。

多图控件
multiple 这个input的特性是html5新有的，所以IE6这么低级的货是无法兼容的。

这个属性相当于以前的这样的多图情况

代码如下	复制代码

不过道理很简单一个是一次只能选择一个图片

HTML5的这个可以选择多个图片，拉风啊。

后台代码不变。

代码如下

复制代码

function getimgmany($rr,$upload_image_dir)
{
$fs = $_FILES[$rr];
$imgnames = array();

for($i=0;$i {
//得到扩展名

$pathinfo = pathinfo($_FILES[$rr]['name'][$i]);

if($fs['size']==0)continue;

//检查文件扩展名，看是否是支持的图片格式
$fileextname = "jpg|gif|png|jpeg|bmp";
if($type=="file")
{
$fileextname.="|txt|sql|html|htm|pdf|chm|rar|zip|doc|xls";
}
echo $pathinfo["extension"];
if( !preg_match("/^".$fileextname."$/i", $pathinfo["extension"]) )
{
echo "

不支持的扩展名点击返回

";
exit();
}

srand ((double) microtime() * 948625);

//生成随机文件名
$targetname =time();
$targetname .= rand() . '.' . $pathinfo["extension"];

$targetpath = $upload_image_dir .strftime ("%Y%m" ,time())."/". $targetname;
copy($_FILES[$rr]['tmp_name'][$i], $targetpath);
unlink($_FILES[$rr]['tmp_name'][$i]);

$imga = $targetpath;
array_push($imgnames,$imga);
}
return $imgnames;
}

代码调用
php端代码

代码如下	复制代码
$imgdir = "uploads/"; $imgs = getimgmany('files',$imgdir); print_r($imgs);

再看个ajax例子

html5 ajax上传图片的代码如下：

代码如下

复制代码

HTML5上传图片

注意图片太小的话，看不到进度条

开始上传

读取进度：

推荐专题

最新下载

热门教程

HTML5实现多文件多图上传实例

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程