本文實例講述了thinkphp框架表單數(shù)組實現(xiàn)圖片批量上傳功能。分享給大家供大家參考，具體如下：
今天做一個表單數(shù)組實現(xiàn)圖片批量上傳，js不是很會，在網(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'>請上傳小于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()函數(shù)，但是把js變量i傳入U()函數(shù)無法解析，所以在這里改為了url方式。
在獲取表單數(shù)組并插入數(shù)據(jù)庫時用循環(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,做這個由于不熟悉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不兼容，后又在網(wǎng)上找了上面的方法。
更多關(guān)于thinkPHP相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《ThinkPHP入門教程》、《thinkPHP模板操作技巧總結(jié)》、《ThinkPHP常用方法總結(jié)》、《codeigniter入門教程》、《CI(CodeIgniter)框架進階教程》、《Zend FrameWork框架入門教程》及《PHP模板技術(shù)總結(jié)》。
希望本文所述對大家基于ThinkPHP框架的PHP程序設(shè)計有所幫助。
您可能感興趣的文章:- ThinkPHP表單自動提交驗證實例教程
- thinkPHP5 ajax提交表單操作實例分析
- thinkphp表單上傳文件并將文件路徑保存到數(shù)據(jù)庫中
- ThinkPHP防止重復(fù)提交表單的方法實例分析
- thinkphp5 框架結(jié)合plupload實現(xiàn)圖片批量上傳功能示例
- thinkPHP5框架整合plupload實現(xiàn)圖片批量上傳功能的方法
- 使用ThinkPHP+Uploadify實現(xiàn)圖片上傳功能
- thinkphp3.2實現(xiàn)上傳圖片的控制器方法
- thinkphp jquery實現(xiàn)圖片上傳和預(yù)覽效果
- 基于ThinkPHP5.0實現(xiàn)圖片上傳插件
