本文实例讲述了thinkphp框架表单数组实现图片批量上传功能，分享给大家供大家参考，具体如下：

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

1. <script type="text/javascript"> 
2. var i = 1; 
3. function addElement(){ 
4.  var tr = document.createElement('tr'); 
5.  var td1=document.createElement("td"); 
6.  var td2=document.createElement("td"); 
7.  var td3=document.createElement("td"); 
8.  var td4=document.createElement("td"); 
9.  var td5=document.createElement("td"); 
10.  var td6=document.createElement("td"); 
11.  var td7=document.createElement("td"); 
12.  td1.innerHTML="<strong>描述：</strong>"; 
13.  td2.innerHTML="<textarea name='des[]' ></textarea>"; 
14.  td3.innerHTML="<strong>图片：</strong>"; 
15.  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>"; 
16.  td5.innerHTML="<strong>排序：</strong>"; 
17.  td6.innerHTML="<input type='text' name='px[]' value='5'/>"; 
18.  td7.innerHTML="<a class='editbtn' href='javascript：void(0);' οnclick='addElement()'>增 加</a> | <a class='editbtn' href='javascript：void(0);' οnclick='dropElement()'>删减</a>"; 
19.  tr.appendChild(td1); 
20.  tr.appendChild(td2); 
21.  tr.appendChild(td3); 
22.  tr.appendChild(td4); 
23.  tr.appendChild(td5); 
24.  tr.appendChild(td6); 
25.  tr.appendChild(td7); 
26.  tr.id = 'Elem'+i; 
27.  document.getElementById('pdr1').appendChild(tr); 
28.  i++; 
29. } 
30. function dropElement(){ 
31.  var aaa = document.getElementById('Elem'+(i-1)); 
32.  document.getElementById('pdr1').removeChild(aaa); 
33.  i--; 
34. } 
35. function checkForm() 
36. { 
37.  for(k=i;k>=0;k--) 
38.  { 
39.  if(document.getElementById("image"+k).value=="") 
40.  { 
41.   alert("图片不能空"); 
42.   return false; 
43.  } 
44.  } 
45. } 
46. </script> 
47. <div style="margin:20px auto"> 
48. <form method="post" name="form1" action="__URL__/insert" οnsubmit="return checkForm();"> 
49. <input type="hidden" name="fid" value="{$fid}"/> 
50. <table class="table" cellspacing="1" cellpadding="2" width="90%" align="center" 
51. border="0" id="pdr1"> 
52.  <tbody> 
53.   <tr > 
54.    <td width="5%" class="td_bg" align="right"><strong>描述：</strong></td> 
55.    <td class="td_bg" width="25%"><textarea name="des[]"></textarea></td> 
56.     <td width="5%" class="td_bg" align="right"><strong>图片：</strong></td> 
57.    <td class="td_bg" width="25%"> <input type="text" name="image[]" id="image0"/><IFRAME name=fo frameBorder=0 height=24 marginHeight=1 marginWidth=1 
58.             scrolling=no BORDERCOLOR="#CCCCFF" 
59.             src="{:U('Upimg/upimgs','ind=0')}" style="vertical-align: middle;"></iframe> 
60.         <span style="color:red">请上传小于2M的图片</span></td> 
61.     <td width="5%" class="td_bg" align="right"><strong>排序：</strong></td> 
62.    <td class="td_bg" width="20%"><input type="text" name="px[]" value="5"/></td> 
63.     <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> 
64.   </tr> 
65.  </tbody> 
66. </table> 
67.  <input type="submit" name="submit" value=" 添 加 "/> 
68. </form> 

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

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

1. foreach($data['description'] as $key) 
2. { 
3.   $data1['picid']=$fid; 
4.   $data1['description']=$data['description'][$i]; 
5.   $data1['image']=$data['image'][$i]; 
6.   $data1['px']=$data['px'][$i]; 
7.   $result=$model->add($data1); 
8.   $i++; 
9. } 

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

1. var tr = document.createElement('tr'); 
2. tr.innerHTML= "<td width='5%' class='td_bg' align='right'><strong>描述：</strong></td>"; 
3. tr.innerHTML+= "<td class='td_bg' width='25%'><textarea name='des[]'></textarea></td>";   
4. tr.id = 'Elem'+i; 
5. document.getElementById('pdr1').appendChild(tr); 

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

Tags: thinkphp图片批量上传

分享到：