thinkphp框架表单数组实现图片批量上传功能示例
编程学习 2021-07-04 23:05www.dzhlxh.cn编程入门
这篇文章主要介绍了thinkphp框架表单数组实现图片批量上传功能,结合实例形式分析了js前端图片上传与后台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不兼容，后又在网上找了上面的方法。
更多关于thinkPHP相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》、《》及《》。
希望本文所述对大家基于ThinkPHP框架的PHP程序设计有所帮助。