前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >thinkphp框架表单数组实现图片批量上传功能示例

thinkphp框架表单数组实现图片批量上传功能示例

作者头像
砸漏
发布2020-11-02 11:16:32
2.5K0
发布2020-11-02 11:16:32
举报
文章被收录于专栏:恩蓝脚本

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

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

代码语言:javascript
复制
<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方式。

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

代码语言:javascript
复制
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,所以在上面花了很多时间,刚开始我是用

代码语言:javascript
复制
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入门教程》、《thinkPHP模板操作技巧总结》、《ThinkPHP常用方法总结》、《codeigniter入门教程》、《CI(CodeIgniter)框架进阶教程》、《Zend FrameWork框架入门教程》及《PHP模板技术总结》。

希望本文所述对大家基于ThinkPHP框架的PHP程序设计有所帮助。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-09-11 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
数据库
云数据库为企业提供了完善的关系型数据库、非关系型数据库、分析型数据库和数据库生态工具。您可以通过产品选择和组合搭建,轻松实现高可靠、高可用性、高性能等数据库需求。云数据库服务也可大幅减少您的运维工作量,更专注于业务发展,让企业一站式享受数据上云及分布式架构的技术红利!
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档