Number of controls displayed dynamically [datalist]

Recently, I encountered a small feature in the project. to upload an image, I need to dynamically display the number of Image Upload controls and corresponding display information based on the selected number, including setting the size of uploaded files and images.

I have seen the datalist application before, and I can just use it.Code

Front-end code: dropdownlist allows you to select the number of upload controls to be displayed. datalist is used to display controls.

Picture item count:
 <  ASP: dropdownlist  ID  = "Ddlpicturecount"  Runat  = "Server"  Onselectedindexchanged  = "Ddlpicturecount_selectedindexchanged"  
Autopostback  = "True" > 
 </  ASP: dropdownlist  > 
 <  ASP: Label  Forecolor  = "Red"  ID  = "Lblpicturecounttips"  Runat  = "Server"  > </  ASP: Label  > 
 < ASP: datalist  ID  = "Dltdata"  Runat  = "Server"  Width  = "100%"  > 
 <  Itemtemplate  > 
 <  Div  Style  = "Float: left"  > 
<  ASP: fileupload  Runat  = "Server"  ID  = "Fudupload"   /> 
 </  Div  > 
 <  Div  Style  = "Float: Left ;"  > 
<%  --  Top  --  %>  <  ASP: textbox  ID  = "Txtpictop"  Runat  = "Server"  Width  = "40px"  Visible  = "False" > </  ASP: textbox  > 
 <%  --  Left  --  %>  <  ASP: textbox  ID  = "Txtpicleft"  Runat  = "Server" Width  = "40px"  Visible  = "False"  > </  ASP: textbox  > 
Height <  ASP: textbox  ID  = "Txtpicheight"  Runat  = "Server"  Width  = "40px"  > </ ASP: textbox  > 
Width <  ASP: textbox  ID  = "Txtpicwidth"  Runat  = "Server"  Width  = "40px"  > </  ASP: textbox  > 
 </  Div > 
 <  ASP: Label  ID  = "Lbluploadfileinfo"  Runat  = "Server"  Style  = "Margin-top: 5px ;"  Height  = "27px"  > </  ASP: Label  > 
 </  Itemtemplate > 
 </  ASP: datalist  > 
 <  Div  > 
 <  ASP: button  ID  = "Btnupload"  Runat  = "Server"  Text  = "Upload"  Cssclass = "Button"  Onclick  = "Btnupload_click"   /> 
 </  Div  > 

Use the selectchange event of dropdownlist to change the number of rows displayed by datalist.

View code

 Protected   Void Ddlpicturecount_selectedindexchanged ( Object  Sender, eventargs e ){  Try {Bindgrid ();}  Catch  (Exception ex ){  String Message = string. Format ( "  Letterupload ddlpicturecount_selectedindexchanged error:  " + Ex. Message );  This  . Jsalert (Message );}}  Private   Void  Bindgrid (){ Int Count = Convert. toint32 (ddlpicturecount. selectedvalue); datatable dt = New  Datatable ();  For ( Int I = 0 ; I <count; I ++ ) {DT. Rows. Add (Dt. newrow ();} dltdata. datasource = DT; dltdata. databind ();} 

Background button event

View code

   Foreach (Datalistitem item In Dltdata. Items)
{
System. Web. UI. webcontrols. fileupload uploadcontrol = getitemcontrol <system. Web. UI. webcontrols. fileupload> (item, "  Fudupload  " );

Label lblfileinfo = getitemcontrol <system. Web. UI. webcontrols. Label> (item, "  Lbluploadfileinfo  " );

 If (! Uploadcontrol. hasfile)
{
Lblfileinfo. Text = "" ;
 Continue ;
}
 String Strattachpath = String . Empty;
 //  Record image size  
              Int Picheight = 0 ;
 Int Picwidth = 0 ;
 String Extension = path. getextension (uploadcontrol. postedfile. filename );
 Switch (Extension. tolower ())
{
 Case   "  . Gif  " :
 Case   "  . Jpg  " :
 Case   "  . PNG " :
 Case   "  . BMP  " :
 Try 
{
 Using (System. Drawing. Image myimage = system. Drawing. image. fromstream (uploadcontrol. postedfile. inputstream ))
{
Picheight = myimage. height;
Picwidth = myimage. width;

 // Set default image values  
                              If (Picheight = 0 )
Picheight = 200 ;
 If (Picwidth = 0 )
Picwidth = 200 ;
}

Strattachpath = service. uploadletterfile (uploadcontrol). Replace ( " [Letterhost]  " , System. Web. httpcontext. Current. Request. url. HOST );
 //  Show uploaded file names  
 Lblfileinfo. Text = uploadcontrol. filename;
}
 Catch 
{
 //  The size of the image cannot be read. It may not be an image or a photo.  
 Utility. alertinupdatepanel ( This . Updatepanel,"  Alert  " , "  Can not load picture's size,  " + Uploadcontrol. postedfile. filename + "  May be not a picture!  " );
 Continue ;
}

 Break ;
 Default :
Utility. alertinupdatepanel ( This . Updatepanel, "  Alert  " , "  Please upload picture files:. gif/. jpg/. PNG/. BMP!  " );
 Continue ;
}

 Int Top = 0 ;
 Int . Tryparse (getitemcontrol <textbox> (item,"  Txtpictop  " ). Text. Trim (), Out Top );
 Int Left = 0 ;
 Int . Tryparse (getitemcontrol <textbox> (item, "  Txtpicleft  " ). Text. Trim (), Out Left );

 Try 
{
//  Int Height = 0;  
                  If (Getitemcontrol <textbox> (item, "  Txtpicheight  " ). Text. Trim ()! = "" )
 Int . Tryparse (getitemcontrol <textbox> (item, "  Txtpicheight  " ). Text. Trim (), Out Picheight );
//  Int width = 0;  
                  If (Getitemcontrol <textbox> (item, "  Txtpicwidth  " ). Text. Trim ()! = "" )
 Int . Tryparse (getitemcontrol <textbox> (item, "  Txtpicwidth  " ). Text. Trim (), Out Picwidth );
//  End sky. Chen  
 Picture = New Letterpicentity ();
Picture. letterpicguid = guid. newguid (). tostring ();
Picture. attachpath = strattachpath;
Picture. topspace = top;
Picture. leftspace = left;
Picture. Height = picheight;
Picture. width = picwidth;
Picturelist. Add (picture );
}
 Catch 
{
 Throw   New Exception ( "  The Image Height and length are not numeric  " );
}



}

Setsessiondata ( This . Page, "  Picturelist  " , Picturelist );
}

The getitemcontrol method is used to obtain the control based on the ID.

View code

 
 PrivateT getitemcontrol <t> (datalistitem currentitem,StringControlid)
{
ObjectOBJ = currentitem. findcontrol (controlid );
Return(T) OBJ;
}
 

During the uploaded action, datalist is traversed, data in each row is processed, and controls such as fileupload, Textbox, and label are crawled. The corresponding action may be judgment or saved.

Last few

Two upload controls are displayed by default. You can enter a number next to them to set the height and width of the image.

Select a file and click "Upload" to see which files have been uploaded.

Reselect the dropdownlist value and re-list the control.

The page is ugly for reference only