HTML5 多图上传

时间 2014-06-05 16:06:29  月小升博客

原文  http://java-er.com/blog/html5-many-image-upload/

主题 HTML5

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

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

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

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

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

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

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

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

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

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

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

后台代码不变。

function getimgmany($rr,$upload_image_dir)

{

  $fs = $_FILES[$rr];

  $imgnames = array();

  for($i=;$i<count($fs['name']);$i++)

  {

    //得到扩展名

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

    if($fs['size']==)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() * );

      //生成随机文件名

      $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;

  }

$imgdir = "uploads/";

$imgs = getimgmany('files',$imgdir);

print_r($imgs);

首发地址：月小升博客