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 编程请选择正确的文本编辑软件
Dec 21 PHP
PHP中MD5函数使用实例代码
Jun 07 PHP
php 正则匹配函数体
Aug 25 PHP
用PHP ob_start()控制浏览器cache、生成html实现代码
Feb 16 PHP
php异常:Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE  eval()'d code error
May 19 PHP
php中is_null,empty,isset,unset 的区别详细介绍
Apr 28 PHP
PHP中如何实现常用邮箱的基本判断
Jan 07 PHP
PHP中is_file()函数使用指南
May 08 PHP
php getcwd与dirname(__FILE__)区别详解
Sep 24 PHP
PHP7.1实现的AES与RSA加密操作示例
Jun 15 PHP
PHP查找一列有序数组是否包含某值的方法
Feb 07 PHP
PHP接口类(interface)的定义、特点和应用示例
May 18 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
《星际争霸》各版本雷兽特点图文解析 雷兽不同形态一览
2020/03/02 星际争霸
php利用header函数下载各种文件
2016/08/24 PHP
PHP单例模式与工厂模式详解
2017/08/29 PHP
Laravel框架使用monolog_mysql实现将系统日志信息保存到mysql数据库的方法
2018/08/16 PHP
Laravel框架FormRequest中重写错误处理的方法
2019/02/18 PHP
laravel框架与其他框架的详细对比
2019/10/23 PHP
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
2011/10/29 Javascript
你有必要知道的25个JavaScript面试题
2015/12/29 Javascript
JS onkeypress兼容性写法详解
2016/04/27 Javascript
jQuery事件详解
2017/02/23 Javascript
基于JavaScript实现焦点图轮播效果
2017/03/27 Javascript
php简单数据库操作类的封装
2017/06/08 Javascript
通过命令行创建vue项目的方法
2017/07/20 Javascript
Vue拖拽组件开发实例详解
2018/05/11 Javascript
微信小程序实现吸顶效果
2020/01/08 Javascript
[14:03]2017DOTA2亚洲邀请赛开幕式:12神兵演绎水墨中华
2017/04/01 DOTA
[42:06]2019国际邀请赛全明星赛 8.23
2019/09/05 DOTA
python访问sqlserver示例
2014/02/10 Python
通过数据库向Django模型添加字段的示例
2015/07/21 Python
详细解读Python中解析XML数据的方法
2015/10/15 Python
Python黑帽编程 3.4 跨越VLAN详解
2016/09/28 Python
对numpy数据写入文件的方法讲解
2018/07/09 Python
浅谈django rest jwt vue 跨域问题
2018/10/26 Python
详解Python 多线程 Timer定时器/延迟执行、Event事件
2019/06/27 Python
Python高级编程之继承问题详解(super与mro)
2019/11/19 Python
Numpy之将矩阵拉成向量的实例
2019/11/30 Python
Python读取多列数据以及用matplotlib制作图表方法实例
2020/09/23 Python
HTML5在a标签内放置块级元素示例代码
2013/08/23 HTML / CSS
加拿大著名时装品牌:SOIA & KYO
2016/08/23 全球购物
Lacoste美国官网:经典POLO衫品牌
2016/10/12 全球购物
报关简历自我评价怎么写
2013/09/19 职场文书
办公室内勤工作职责
2013/12/11 职场文书
美术教师自我鉴定
2014/02/12 职场文书
司法局火灾防控方案
2014/06/05 职场文书
学校火灾防控方案
2014/06/09 职场文书
创建绿色学校先进个人材料
2014/08/20 职场文书