thinkphp框架表单数组实现图片批量上传功能示例
程序员文章站
2022-03-20 13:46:14
本文实例讲述了thinkphp框架表单数组实现图片批量上传功能。分享给大家供大家参考,具体如下:今天做一个表单数组实现图片批量上传,js不是很会,在网上找了资料改的,html页面如下:
本文实例讲述了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不兼容,后又在网上找了上面的方法。
上一篇: 在RecyclerView中实现button的跳转功能
下一篇: python数据挖掘需要学的内容
推荐阅读
-
django框架实现一次性上传多个文件功能示例【批量上传】
-
django框架实现一次性上传多个文件功能示例【批量上传】
-
vue+elementUI实现表单和图片上传及验证功能示例
-
基于ASP.NET+easyUI框架实现图片上传功能(表单)
-
基于ASP.NET+EasyUI框架实现图片上传提交表单功能(js提交图片)
-
vue+elementUI实现表单和图片上传及验证功能示例
-
基于ASP.NET+EasyUI框架实现图片上传提交表单功能(js提交图片)
-
Thinkphp5框架实现图片、音频和视频文件的上传功能详解
-
Thinkphp框架+Layui实现图片/文件上传功能分析
-
thinkPHP实现上传图片及生成缩略图功能示例