thinkphp框架表单数组实现图片批量上传功能示例

今天做一个表单数组实现图片批量上传，js不是很会，在网上找了资料改的，html页面如下：

<script type="text/javascript"> var i = 1; function addElement(){ var tr = document.createElement('tr'); var td1=document.createElement("td"); var td2=document.createElement("td"); var td3=document.createElement("td"); var td4=document.createElement("td"); var td5=document.createElement("td"); var td6=document.createElement("td"); var td7=document.createElement("td"); td1.innerHTML="<strong>描述：</strong>"; td2.innerHTML="<textarea ></textarea>"; td3.innerHTML="<strong>图片：</strong>"; td4.innerHTML="<input type='text'/><IFRAME name=fo frameBorder=0 height=24 marginHeight=1 marginWidth=1 scrolling=no BORDERCOLOR='#CCCCFF' src='__APP__/Upimg/upimgs/ind/"+i+"'></iframe><span>请上传小于2M的图片</span>"; td5.innerHTML="<strong>排序：</strong>"; td6.innerHTML="<input type='text' value='5'/>"; td7.innerHTML="<a href='javascript:void(0);' οnclick='addElement()'>增 加</a> | <a href='javascript:void(0);' οnclick='dropElement()'>删减</a>"; tr.appendChild(td1); tr.appendChild(td2); tr.appendChild(td3); tr.appendChild(td4); tr.appendChild(td5); tr.appendChild(td6); tr.appendChild(td7); tr.id = 'Elem'+i; document.getElementById('pdr1').appendChild(tr); i++; } function dropElement(){ var aaa = document.getElementById('Elem'+(i-1)); document.getElementById('pdr1').removeChild(aaa); i--; } function checkForm() { for(k=i;k>=0;k--) { if(document.getElementById("image"+k).value=="") { alert("图片不能空"); return false; } } } </script> <div> <form method="post" action="__URL__/insert" οnsubmit="return checkForm();"> <input type="hidden" value="{$fid}"/> <table cellspacing="1" cellpadding="2"> <tbody> <tr > <td><strong>描述：</strong></td> <td><textarea></textarea></td> <td><strong>图片：</strong></td> <td> <input type="text"/><IFRAME name=fo frameBorder=0 height=24 marginHeight=1 marginWidth=1 scrolling=no BORDERCOLOR="#CCCCFF" src="{:U('Upimg/upimgs','ind=0')}"></iframe> <span>请上传小于2M的图片</span></td> <td><strong>排序：</strong></td> <td><input type="text" value="5"/></td> <td><a href="javascript:void(0);" οnclick="addElement()">增 加</a> | <a href="javascript:void(0);" οnclick="dropElement()">删减</a></td> </tr> </tbody> </table> <input type="submit" value=" 添 加 "/> </form>

在做__APP__/Upimg/upimgs/ind/+ind这段时，刚开始我用的U()函数，但是把js变量i传入U()函数无法解析，所以在这里改为了url方式。

在获取表单数组并插入数据库时用循环遍历并写入数据库：

foreach($data['description'] as $key) { $data1['picid']=$fid; $data1['description']=$data['description'][$i]; $data1['image']=$data['image'][$i]; $data1['px']=$data['px'][$i]; $result=$model->add($data1); $i++; }

$data是通过转换来的，可以直接用$_POST,做这个由于不熟悉js，所以在上面花了很多时间,刚开始我是用

var tr = document.createElement('tr'); tr.innerHTML= "<td><strong>描述：</strong></td>"; tr.innerHTML+= "<td><textarea></textarea></td>"; tr.id = 'Elem'+i; document.getElementById('pdr1').appendChild(tr);

但是ie不兼容，后又在网上找了上面的方法。

更多关于thinkPHP相关内容感兴趣的读者可查看本站专题：《ThinkPHP入门教程》、《thinkPHP模板操作技巧总结》、《ThinkPHP常用方法总结》、《codeigniter入门教程》、《CI(CodeIgniter)框架进阶教程》、《Zend FrameWork框架入门教程》及《PHP模板技术总结》。