thinkphp如何用表單數(shù)組實(shí)現(xiàn)圖片批量上傳功能

這篇文章主要講解了“thinkphp如何用表單數(shù)組實(shí)現(xiàn)圖片批量上傳功能”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“thinkphp如何用表單數(shù)組實(shí)現(xiàn)圖片批量上傳功能”吧

今天做一個(gè)表單數(shù)組實(shí)現(xiàn)圖片批量上傳，js不是很會(huì)，在網(wǎng)上找了資料改的，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'>請(qǐng)上傳小于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 >
<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')}" ></iframe>
        <span >請(qǐng)上傳小于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這段時(shí)，剛開始我用的U()函數(shù)，但是把js變量i傳入U(xiǎn)()函數(shù)無法解析，所以在這里改為了url方式。

在獲取表單數(shù)組并插入數(shù)據(jù)庫時(shí)用循環(huán)遍歷并寫入數(shù)據(jù)庫：

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是通過轉(zhuǎn)換來的，可以直接用$_POST,做這個(gè)由于不熟悉js，所以在上面花了很多時(shí)間,剛開始我是用

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不兼容，后又在網(wǎng)上找了上面的方法。

感謝各位的閱讀，以上就是“thinkphp如何用表單數(shù)組實(shí)現(xiàn)圖片批量上傳功能”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)thinkphp如何用表單數(shù)組實(shí)現(xiàn)圖片批量上傳功能這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！