码迷,mamicode.com
首页 > Web开发 > 详细

HTML5 多图上传

时间:2016-02-25 13:54:59      阅读:177      评论:0      收藏:0      [点我收藏+]

标签:

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;
  }
$imgdir = "uploads/";
$imgs = getimgmany(files,$imgdir);
print_r($imgs);

 

首发地址:月小升博客

HTML5 多图上传

标签:

原文地址:http://www.cnblogs.com/archoncap/p/5216622.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!