Asp.net fileupload controls upload images and preview images,

Asp.net fileupload controls upload images and preview images,

This article shares with you the functions of the fileupload control to upload images and preview images. It also configures web. config and looks at the final results first:

Page code:

<Form id = "form1" runat = "server"> <div> <asp: FileUpload ID = "FileUpload1" runat = "server"/> <asp: button ID = "Button1" runat = "server" Text = "Upload" Width = "54px" OnClick = "button#click"/> <asp: label ID = "Label1" runat = "server" Text = "" Style = "color: Red"> </asp: Label> <asp: image runat = "server" ID = "Image1" Style = "z-index: 102; left: 20px; position: absolute; top: 49px "Width =" 73px "/> </div> </form>

Background code:

Using System; using System. data; using System. configuration; using System. web; using System. web. security; using System. web. UI; using System. web. UI. webControls; using System. web. UI. webControls. webParts; using System. web. UI. htmlControls; namespace Web. file {public partial class WebForm1: System. web. UI. page {protected void Page_Load (object sender, EventArgs e) {}# region File Upload /// <summary> // File Upload /// </su Mmary> protected void button#click (object sender, EventArgs e) {if (FileUpload1.FileName = "") {this. label1.Text = "the file to be uploaded cannot be blank"; return;} bool fileIsValid = false; // if the file to be uploaded is confirmed, determine whether the file type meets the requirements if (this. fileUpload1.HasFile) {// obtain the suffix String fileExtension = System. IO. path. getExtension (this. fileUpload1.FileName ). toLower (); String [] restrictExtension = {". gif ",". jpg ",". bmp ",". png "}; // determines whether the file type is For (int I = 0; I <restrictExtension. length; I ++) {if (fileExtension = restrictExtension [I]) {fileIsValid = true ;}// if the file type meets the requirements, call the SaveAs Method for upload, and show the relevant information if (fileIsValid = true) {// whether the uploaded file is greater than 10 M if (FileUpload1.PostedFile. contentLength> (10*1024*1024) {this. label1.Text = "uploading files too large"; return;} try {this. image1.ImageUrl = "~ /File/"+ FileUpload1.FileName; this. FileUpload1.SaveAs (Server. MapPath ("~ /File/") + FileUpload1.FileName); this. Label1.Text =" the File is uploaded successfully! ";} Catch {this. Label1.Text =" An error occurred while uploading the file! ";}Finally {}} else {this. Label1.Text =" only files suffixed with .gif, .jpg, .bmp, .png can be uploaded ";}}}# endregion }}

Web. config Configuration:

<! -- Because the maximum size of the FileUpload control is 4 MB, if you want to upload a larger file, change the size of maxRequestLength --> <configuration> <system. web> <compilation debug = "true" targetFramework = "4.0"/> 
You can implement the fileupload control in your project to upload images and preview images. This makes the website more practical. The basic steps are as follows, and there may be some omissions in small series, I hope you will understand.