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 相关文章推荐
一个域名查询的程序
Oct 09 PHP
PHP中调用ASP.NET的WebService的代码
Apr 22 PHP
PHP-redis中文文档介绍
Feb 07 PHP
基于PHP常用字符串的总结(待续)
Jun 07 PHP
PHP PDOStatement:bindParam插入数据错误问题分析
Nov 13 PHP
php对二维数组按指定键值key排序示例代码
Nov 26 PHP
JSON两种结构之对象和数组的理解
Jul 19 PHP
PHP 爬取网页的主要方法
Jul 13 PHP
php实现在线考试系统【附源码】
Sep 18 PHP
php设计模式之工厂模式用法经典实例分析
Sep 20 PHP
laravel5.6 框架邮件队列database驱动简单demo示例
Jan 26 PHP
PHPStorm2020.1永久激活及下载更新至2020(推荐)
Sep 25 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实现图片简单上传
2006/10/09 PHP
php中的数组操作函数整理
2008/08/18 PHP
PHP+JS+rsa数据加密传输实现代码
2011/03/23 PHP
IIS安装Apache伪静态插件的具体操作图文
2013/07/01 PHP
smarty获得当前url的方法分享
2014/02/14 PHP
PHP+jquery实时显示网站在线人数的方法
2015/01/04 PHP
php压缩和解压缩字符串的方法
2015/03/14 PHP
PHP实现的曲线统计图表示例
2016/11/10 PHP
在Laravel 中实现是否关注的示例
2019/10/22 PHP
Javascript document.referrer判断访客来源网址
2020/05/15 Javascript
javascript的函数作用域
2014/11/12 Javascript
JQuery设置时间段下拉选择实例
2014/12/30 Javascript
JavaScript DOM操作表格及样式
2015/04/13 Javascript
Vue常用指令V-model用法
2017/03/08 Javascript
nodejs模块学习之connect解析
2017/07/05 NodeJs
vue中v-for加载本地静态图片方法
2018/03/03 Javascript
Koa项目搭建过程详细记录
2018/04/12 Javascript
解决axios发送post请求返回400状态码的问题
2018/08/11 Javascript
angular中子控制器向父控制器传值的实例
2018/10/08 Javascript
微信小程序利用button控制条件标签的变量问题
2020/03/15 Javascript
[01:03:47]VP vs NewBee Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
ssh批量登录并执行命令的python实现代码
2012/05/25 Python
Python中使用 Selenium 实现网页截图实例
2014/07/18 Python
Python求解平方根的方法
2015/03/11 Python
python查看zip包中文件及大小的方法
2015/07/09 Python
numpy数组之存取文件的实现示例
2019/05/24 Python
Quiksilver荷兰官方网站:冲浪和滑雪板
2019/11/16 全球购物
大学生军训自我评价分享
2013/11/09 职场文书
《水乡歌》教学反思
2014/04/24 职场文书
工程项目经理任命书
2014/06/05 职场文书
学习群众路线的心得体会
2014/11/05 职场文书
模范教师材料大全
2014/12/16 职场文书
毕业生捐书活动倡议书
2015/04/27 职场文书
团组织关系介绍信
2019/06/24 职场文书
HTML中的表单Form实现居中效果
2021/05/25 HTML / CSS
vue+echarts实现多条折线图
2022/03/21 Vue.js