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 相关文章推荐
PHP在XP下IIS和Apache2服务器上的安装
Sep 05 PHP
PHP syntax error, unexpected $end 错误的一种原因及解决
Oct 25 PHP
php入门学习知识点六 PHP文件的读写操作代码
Jul 14 PHP
解密ThinkPHP3.1.2版本之模板继承
Jun 19 PHP
destoon二次开发模板及调用语法汇总
Jun 21 PHP
smarty模板引擎使用内建函数foreach循环取出所有数组值的方法
Jan 22 PHP
PHP下SSL加密解密、验证、签名方法(很简单)
Jun 28 PHP
一段实用的php验证码函数
May 19 PHP
php编译安装php-amq扩展简明教程
Jun 25 PHP
PHP实现验证码校验功能
Nov 16 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
Feb 27 PHP
THINKPHP5分页数据对象处理过程解析
Oct 28 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 身份证号验证函数
2009/05/07 PHP
PHP学习 变量使用总结
2011/03/24 PHP
php+redis实现注册、删除、编辑、分页、登录、关注等功能示例
2017/02/15 PHP
php获取数据库中数据的实现方法
2017/06/01 PHP
5 cool javascript apps
2007/03/24 Javascript
让IE8支持DOM 2(不用框架!)
2009/12/31 Javascript
javascript中的array数组使用技巧
2010/01/31 Javascript
利用JS自动打开页面上链接的实现代码
2011/09/25 Javascript
JS的document.all函数使用示例
2013/12/30 Javascript
jquery制作居中遮罩层效果分享
2014/02/21 Javascript
浅谈JavaScript数据类型
2015/03/03 Javascript
Nodejs获取网络数据并生成Excel表格
2020/03/31 NodeJs
JS 面向对象之继承---多种组合继承详解
2016/07/10 Javascript
使用jquery datatable和bootsrap创建表格实例代码
2017/03/17 Javascript
JS基于正则表达式实现的密码强度验证功能示例
2017/09/21 Javascript
AngularJS 中的数据源的循环输出
2017/10/12 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
2017/10/28 jQuery
js中事件对象和事件委托的介绍
2019/01/21 Javascript
vue请求数据的三种方式
2020/03/04 Javascript
ES6函数和数组用法实例分析
2020/05/23 Javascript
[03:44]2015国际邀请赛选手档案—Cloud9.NoTail
2015/07/28 DOTA
python文件操作相关知识点总结整理
2016/02/22 Python
在Python中通过threading模块定义和调用线程的方法
2016/07/12 Python
DRF跨域后端解决之django-cors-headers的使用
2019/01/27 Python
python语言线程标准库threading.local解读总结
2019/11/10 Python
完美解决pyinstaller打包报错找不到依赖pypiwin32或pywin32-ctypes的错误
2020/04/01 Python
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
2019/06/03 HTML / CSS
英文版区域经理求职信
2013/10/23 职场文书
生产总经理岗位职责
2013/12/19 职场文书
房屋出售授权委托书
2014/10/12 职场文书
党员三严三实心得体会
2014/10/13 职场文书
2015年效能监察工作总结
2015/04/23 职场文书
合同审查法律意见书
2015/06/04 职场文书
英雄儿女观后感
2015/06/09 职场文书
初中班主任培训心得体会
2016/01/07 职场文书
Python词云的正确实现方法实例
2021/05/08 Python