HTML5 多图上传
2016-02-25 12:49
495 查看
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="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的input标签的pattern正则匹配问题
- 拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)
- HTML5商城开发四 多图或多商品的水平滚动展示
- 如何解决IE9以下的浏览器对html5标签不兼容的问题
- 细谈HTML5
- HTML5中如何显示视频HTML5视频播放
- 基于HTML5 Ajax实现文件上传并显示进度条
- html5 history api 实现无刷新浏览以及历史记录管理
- html5中的一些新语义标签
- 【推荐】一个强大的html5游戏引擎 pixi
- 关于H5 storage 的一些注意事项以及用法
- Html5 Canvas 变换矩阵与坐标变形之间的关系
- HTML5 postMessage 和 onmessage API 详细应用
- html5 ajax文件上传
- h5
- 叼叼叼,HTML5日期(Date)类型和文本(Text)类型互相转换
- 三天学会HTML5 ――多媒体元素的使用
- HTML5无刷新修改URL:利用 History API 无刷新更改地址栏
- 三天学会HTML5 ——多媒体元素的使用
- CDH5上安装Hive,HBase,Impala,Spark等服务