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文本操作类
Nov 25 PHP
在PHP中检查PHP文件是否有语法错误的方法
Dec 23 PHP
PHP排序之二维数组的按照字母排序实现代码
Aug 13 PHP
php中通过正则表达式下载内容中的远程图片的函数代码
Jan 10 PHP
一个显示某段时间内每个月的方法 返回由这些月份组成的数组
May 16 PHP
PHP笔记之:日期函数的使用介绍
Apr 24 PHP
php 启动报错如何解决
Jan 17 PHP
php中的路径问题与set_include_path使用介绍
Feb 11 PHP
php从文件夹随机读取文件的方法
Jun 01 PHP
Yii2.0多文件上传实例说明
Jul 24 PHP
如何直接访问php实例对象中的private属性详解
Oct 12 PHP
PHP的mysqli_stmt_init()函数讲解
Jan 24 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 和 MySQL 开发的 8 个技巧
2007/01/02 PHP
destoon利用Rewrite规则设置网站安全
2014/06/21 PHP
php中照片旋转 (orientation) 问题的正确处理
2017/02/16 PHP
学习YUI.Ext基础第一天
2007/03/10 Javascript
ExtJS下grid的一些属性说明
2009/12/13 Javascript
CSS和JS标签style属性对照表(方便js开发的朋友)
2010/11/11 Javascript
基于Jquery的仿照flash放大图片效果代码
2011/03/16 Javascript
JAVASCRIPT函数作用域和提前声明 分享
2013/08/22 Javascript
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
2013/12/04 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
2013/12/16 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
2015/03/18 Javascript
jQuery的css() 方法使用指南
2015/05/03 Javascript
BootStrap 模态框实现刷新网页并关闭功能
2017/01/04 Javascript
Vue数据驱动模拟实现4
2017/01/12 Javascript
详解如何在vue中使用sass
2017/06/21 Javascript
JS实现的简单标签点击切换功能示例
2017/09/21 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
2018/08/27 Javascript
快速解决vue在ios端下点击响应延时的问题
2018/08/27 Javascript
jQuery表单元素过滤选择器用法实例分析
2019/02/20 jQuery
vue中多个倒计时实现代码实例
2019/03/27 Javascript
Vue结合路由配置递归实现菜单栏功能
2020/06/16 Javascript
[02:35]DOTA2超级联赛专访XB 难忘一年九冠称王
2013/06/20 DOTA
[02:38]DOTA2英雄基础教程 噬魂鬼
2014/01/03 DOTA
Eclipse + Python 的安装与配置流程
2013/03/05 Python
Python实现通过解析域名获取ip地址的方法分析
2019/05/17 Python
python原类、类的创建过程与方法详解
2019/07/19 Python
浅谈keras2 predict和fit_generator的坑
2020/06/17 Python
详解pandas中利用DataFrame对象的.loc[]、.iloc[]方法抽取数据
2020/12/13 Python
小饰品店的创业计划书范文
2013/12/28 职场文书
平面设计专业大学生职业规划书
2014/03/12 职场文书
马云北大演讲完整版:真心话,什么才是阿里的核心竞争力?
2014/04/04 职场文书
社会实践评语
2014/04/28 职场文书
技术岗位竞聘演讲稿
2014/05/16 职场文书
干部选拔任用方案
2014/05/26 职场文书
惊涛骇浪观后感
2015/06/05 职场文书
从贫穷到富有,是知识技能和学习力的差别
2019/08/20 职场文书