ThinkPHP framework form array to achieve batch image upload function example

Time:2021-2-21

This article describes the ThinkPHP framework form array to achieve the function of image batch upload. The details are as follows:

Today, I made a form array to upload pictures in batches. JS is not very good. I found the information on the Internet and changed it. The HTML page is as follows:

<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 > Description: < / strong > ";
 td2.innerHTML="<textarea name='des[]' ></textarea>";
 Td3. InnerHTML = < strong > picture: < / 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 '> please upload images less than 2m < / span > ";
 Td5. InnerHTML = < strong > sort: < / strong > ";
 td6.innerHTML="<input type='text' name='px[]' value='5'/>";
 td7.innerHTML="<a class='editbtn' href='j avascript:void (0);'οοοοοοοοοοοοοοο? Add element() ', < / a > ||| < a class ='editbt avascript:void (0);'ο nclick'dropelement() '> delete < / 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 ("picture cannot be empty");
  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 cellspacing="1" cellpadding="2" width="90%" align="center"
border="0">
 <tbody>
  <tr >
   < TD width = 5% "align = right" > < strong > Description: < / strong ></td>
   <td width="25%"><textarea name="des[]"></textarea></td>
    < TD width = "5%" align = "right" > < strong > picture: < / strong ></td>
   <td width="25%"> <input type="text" name="image[]"/><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 "> please upload a picture less than 2m < / span ></td>
    < TD width = 5% "align = right" > < strong > sort: < / strong ></td>
   <td width="20%"><input type="text" name="px[]" value="5"/></td>
    <td width="10%" align="right"><a href="j avascript:void (0); "rel =" external nofollow "rel =" external nofollow "ο nclick =" addelement() "> Add < / a > | < a (?) =" J avascript:void (0); "rel =" external nofollow "rel =" external nofollow "ο nclick =" dropelement() "> deleted</a></td>
  </tr>
 </tbody>
</table>
 < input type = submit "name = submit" value = add / >
</form>

What are you doing__ APP__ /In the upimg / upimgs / ind / + ind section, I used the u() function at the beginning, but the JS variable I was passed into the u() function and could not be parsed, so I changed it to URL mode here.

When getting the form array and inserting it into the database, loop through and write it to the database


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 is converted and can be used directly$_ Post, because I’m not familiar with JS, I spent a lot of time on it. At the beginning, I used it

var tr = document.createElement('tr');
tr.innerHTML=  "<td width='5%' class='td_ BG 'align' ='right '> < strong > Description: < / strong > < / td > ";
tr.innerHTML+= "<td class='td_bg' width='25%'><textarea name='des[]'></textarea></td>";  
tr.id = 'Elem'+i;
document.getElementById('pdr1').appendChild(tr);

But ie is not compatible, and later found the above method on the Internet.

For more information about ThinkPHP, interested readers can check out the following topics: introduction to ThinkPHP, summary of operation skills of ThinkPHP template, summary of common methods of ThinkPHP, introduction to CodeIgniter, CI (CodeIgniter) framework advanced course, Zend framework introduction course and PHP template technology summary.

I hope this article will be helpful to the design of PHP program based on ThinkPHP framework.