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


Posted in PHP onApril 04, 2020

本文实例讲述了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框架的PHP程序设计有所帮助。

PHP 相关文章推荐
JS与PHP向函数传递可变参数的区别实例代码
May 18 PHP
解析用PHP实现var_export的详细介绍
Jun 20 PHP
php解压文件代码实现php在线解压
Feb 13 PHP
PHP json_decode函数详细解析
Feb 17 PHP
php实现把数组按指定的个数分隔
Feb 17 PHP
用PHP来计算某个目录大小的方法
Apr 01 PHP
php smarty模板引擎的6个小技巧
Apr 24 PHP
PHP+Mysql树型结构(无限分类)数据库设计的2种方式实例
Jul 15 PHP
老生常谈PHP面向对象之命令模式(必看篇)
May 24 PHP
利用php的ob缓存机制实现页面静态化方法
Jul 09 PHP
PHP实现权限管理功能示例
Sep 22 PHP
Laravel框架实现调用百度翻译API功能示例
May 30 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
Apr 04 #PHP
yii框架结合charjs实现统计30天数据的方法
Apr 04 #PHP
yii 框架实现按天,月,年,自定义时间段统计数据的方法分析
Apr 04 #PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
Apr 04 #PHP
phpQuery采集网页实现代码实例
Apr 02 #PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
Apr 02 #PHP
php计数排序算法的实现代码(附四个实例代码)
Mar 31 #PHP
You might like
php array_merge下进行数组合并的代码
2008/07/22 PHP
php全角字符转换为半角函数
2014/02/07 PHP
CodeIgniter多语言实现方法详解
2016/01/20 PHP
Zend Framework教程之路由功能Zend_Controller_Router详解
2016/03/07 PHP
thinkphp整合微信支付代码分享
2016/11/24 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
PHP写API输出的时用echo的原因详解
2019/04/28 PHP
jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页
2008/12/25 Javascript
JavaScript 异步调用框架 (Part 4 - 链式调用)
2009/08/04 Javascript
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
2009/11/04 Javascript
HTA版JSMin(省略修饰语若干)基于javascript语言编写
2009/12/24 Javascript
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
2011/10/29 Javascript
js 去掉空格实例 Trim() LTrim() RTrim()
2014/01/07 Javascript
基于jQuery实现网页进度显示插件
2015/03/04 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
2015/11/06 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
2016/05/09 Javascript
Java  Spring 事务回滚详解
2016/10/17 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
2017/01/01 Javascript
JS查找数组中重复元素的方法详解
2017/06/14 Javascript
详解JS函数stack size计算方法
2018/06/18 Javascript
nodejs中方法和模块用法示例
2018/12/24 NodeJs
jQuery实现验证用户登录
2019/12/10 jQuery
[00:36]DOTA2上海特级锦标赛 LGD战队宣传片
2016/03/04 DOTA
[01:03:56]Mineski vs TNC 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
python 连续不等式语法糖实例
2020/04/15 Python
Python selenium键盘鼠标事件实现过程详解
2020/07/28 Python
工程师必须了解的LRU缓存淘汰算法以及python实现过程
2020/10/15 Python
matplotlib 画动态图以及plt.ion()和plt.ioff()的使用详解
2021/01/05 Python
Burt’s Bees英国官网:世界领先的天然个人护理品牌
2020/08/17 全球购物
开会迟到检讨书
2014/02/03 职场文书
区长工作作风个人整改措施
2014/10/01 职场文书
公司行政主管岗位职责
2015/04/09 职场文书
《蓝鲸的眼睛》读后感5篇
2020/01/15 职场文书
javascript拖曳互换div的位置实现示例
2021/06/28 Javascript
5种方法告诉你如何使JavaScript 代码库更干净
2021/09/15 Javascript
Golang map映射的用法
2022/04/22 Golang