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); |
月小升QQ 2651044202, 技术交流QQ群 178491360
首发地址：月小升博客 – https://java-er.com/blog/html5-many-image-upload/
无特殊说明，文章均为月小升原创，欢迎转载，转载请注明本文地址，谢谢
您的评论是我写作的动力.