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

 更新时间:2020年04月04日 10:07:02   作者:tang05709  
这篇文章主要介绍了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入门教程》、《thinkPHP模板操作技巧总结》、《ThinkPHP常用方法总结》、《codeigniter入门教程》、《CI(CodeIgniter)框架进阶教程》、《Zend FrameWork框架入门教程》及《PHP模板技术总结》。

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

相关文章

  • PHP的运行机制与原理(底层)

    PHP的运行机制与原理(底层)

    php看着很简单,但是要深入php的运行机制与原理也不是件容易的事,我们除了会使用之外还要知道它底层的工作原理,这样才能灵活的运用,对php运行机制感兴趣的朋友一起学习吧
    2015-11-11
  • php设计模式之迭代器模式实例分析【星际争霸游戏案例】

    php设计模式之迭代器模式实例分析【星际争霸游戏案例】

    这篇文章主要介绍了php设计模式之迭代器模式,结合星际争霸游戏案例形式分析了PHP迭代器模式相关原理、用法及操作注意事项,需要的朋友可以参考下
    2020-04-04
  • Yii2使用$this->context获取当前的Module、Controller(控制器)、Action等

    Yii2使用$this->context获取当前的Module、Controller(控制器)、Action等

    使用Yii2的时候,在某些场景和环境下需要获得Yii2目前所处于的module(模型)、Controller(控制器)、Action(方法),以及会调用控制器里面已经定义过的一些公共的方法等.对于这些问题Yii2可以在视图层View中使用$this->context这个对象去获得。下面通过示例代码给大家讲解下
    2017-03-03
  • 用php实现分页效果的示例代码

    用php实现分页效果的示例代码

    分页效果在网页中是常见的,可是怎样才能实现分页呢,今天做了两种方法来实现一下分页的效果,本文通过实例图文相结合给大家介绍的非常详细,需要的朋友参考下吧
    2020-12-12
  • PHP实现八皇后算法

    PHP实现八皇后算法

    八皇后问题,是一个古老而著名的问题,是回溯算法的典型案例。这篇文章主要介绍了PHP实现八皇后算法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05
  • 一个比较不错的PHP日历类分享

    一个比较不错的PHP日历类分享

    这篇文章主要介绍了一个比较不错的PHP日历类分享,本文直接给出了实现的类代码和使用方法示例,需要的朋友可以参考下
    2014-11-11
  • PHP中的正则表达式实例详解

    PHP中的正则表达式实例详解

    在编程里基本都会用到正则表达式来处理数据,那么下面就具体在PHP中怎么运用吧,本文通过具体的实例,给大家讲解了PHP中正则表达式的使用方法。
    2017-04-04
  • PHP微信红包API接口

    PHP微信红包API接口

    这篇文章主要介绍了PHP微信红包API接口,针对微信高级红包接口,开发PHP版本的API接口的主要代码进行分析,感兴趣的小伙伴们可以参考一下
    2015-12-12
  • 基于PHP生成简单的验证码

    基于PHP生成简单的验证码

    这篇文章主要介绍了基于PHP生成简单的验证码的相关资料,需要的朋友可以参考下
    2016-06-06
  • php die()与exit()的区别实例详解

    php die()与exit()的区别实例详解

    php中die()与exit()的真正区别是什么因,我们百度一下发现die是退出并释放内存,exit是退出但不释放内存了,那么真的是这样吗,需要的朋友可以参考下
    2016-12-12

最新评论