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

本文实例讲述了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 name='des[]' ></textarea>";
 td3.innerhtml="<strong>图片：</strong>";
 td4.innerhtml="<input type='text' name='image[]' id='image"+i+"'/><iframe name=fo frameborder=0 height=24 marginheight=1 marginwidth=1 scrolling=no bordercolor='#ccccff' src='__app__/upimg/upimgs/ind/"+i+"' style='vertical-align: middle;'></iframe><span style='color:red'>请上传小于2m的图片</span>";
 td5.innerhtml="<strong>排序：</strong>";
 td6.innerhtml="<input type='text' name='px[]' value='5'/>";
 td7.innerhtml="<a class='editbtn' href='javascript:void(0);' οnclick='addelement()'>增 加</a> | <a class='editbtn' 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 style="margin:20px auto">
<form method="post" name="form1" action="__url__/insert" οnsubmit="return checkform();">
<input type="hidden" name="fid" value="{$fid}"/>
<table class="table" cellspacing="1" cellpadding="2" width="90%" align="center"
border="0" id="pdr1">
 <tbody>
  <tr >
   <td width="5%" class="td_bg" align="right"><strong>描述：</strong></td>
   <td class="td_bg" width="25%"><textarea name="des[]"></textarea></td>
    <td width="5%" class="td_bg" align="right"><strong>图片：</strong></td>
   <td class="td_bg" width="25%"> <input type="text" name="image[]" id="image0"/><iframe name=fo frameborder=0 height=24 marginheight=1 marginwidth=1
            scrolling=no bordercolor="#ccccff"
            src="{:u('upimg/upimgs','ind=0')}" style="vertical-align: middle;"></iframe>
        <span style="color:red">请上传小于2m的图片</span></td>
    <td width="5%" class="td_bg" align="right"><strong>排序：</strong></td>
   <td class="td_bg" width="20%"><input type="text" name="px[]" value="5"/></td>
    <td width="10%" class="td_bg" align="right"><a class="editbtn" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" οnclick="addelement()">增 加</a> | <a class="editbtn" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" οnclick="dropelement()">删减</a></td>
  </tr>
 </tbody>
</table>
 <input type="submit" name="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 width='5%' class='td_bg' align='right'><strong>描述：</strong></td>";
tr.innerhtml+= "<td class='td_bg' width='25%'><textarea name='des[]'></textarea></td>";  
tr.id = 'elem'+i;
document.getelementbyid('pdr1').appendchild(tr);

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