牛骨文教育服务平台(让学习变的简单)
博文笔记

thinkphp表单数组

创建时间:2014-03-13 投稿人: 浏览次数:150

今天做一个表单数组实现图片批量上传,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);" onclick="addElement()">增 加</a> | <a class="editbtn" href="javascript:void(0);" onclick="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" onsubmit="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);" onclick="addElement()">增 加</a> | <a class="editbtn" href="javascript:void(0);" onclick="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不兼容,后又在网上找了上面的方法。

 

声明:该文观点仅代表作者本人,牛骨文系教育信息发布平台,牛骨文仅提供信息存储空间服务。