HTML5 多图上传

一次选择多张照片,你是不是要这样的效果

刚刚研究完FLASH的多图上传,不过html5这么时髦的东西,也得研究下。

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

多图控件<input id="fileImage" type="file" size="30" name="files[]" multiple />

multiple 这个input的特性是html5新有的,所以IE6这么低级的货是无法兼容的。

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

<input id="fileImage" type="file" size="30" name="files[]" >
<input id="fileImage" type="file" size="30" name="files[]" >
<input id="fileImage" type="file" size="30" name="files[]" >

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

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

后台代码不变。

function getimgmany($rr,$upload_image_dir)
{
    $fs = $_FILES[$rr];
    $imgnames = array();
 
	for($i=0;$i<count($fs['name']);$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 "<div style='font-size:12px;color=red;font-weight:bold;'>不支持的扩展名 <a href='javascript:history.back(-1);'>点击返回</a></div>";
				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);


This entry was posted in PHP and tagged , , . Bookmark the permalink.
月小升QQ 2651044202, 技术交流QQ群 178491360
首发地址:月小升博客https://java-er.com/blog/html5-many-image-upload/
无特殊说明,文章均为月小升原创,欢迎转载,转载请注明本文地址,谢谢
您的评论是我写作的动力

Leave a Reply

Your email address will not be published. Required fields are marked *

*

*

  

About Me

静水流深,水滴石穿