Asp. Net Web Control (1) (upload Control)

This control encapsulates the cloudgamer multi-file upload system without refreshing the 163 network disk, making it easier and more convenient to use.

First, let's look at the effect:

<Hxj: UploadControl ID = "uploadfile" runat = "server" MaxFileNumbers = "5" AllowExtensions = "jpg, gif"/> <asp: button ID = "Button1" runat = "server" Text = "Upload" OnClick = "button#click"/>

The html code is simple and is designed as follows:

It is not nice in the design status because the style is not loaded.

Preview effect:

After previewing, the style is loaded and the effect is much better.

With the background code:

Protected void button#click (object sender, EventArgs e) {Hxj. Web. UploadFile uf = new Hxj. Web. UploadFile (); // set the path // uf. FilePath = "~ /"; // List of uploaded file information <Hxj. Web. UploadFileInfo> filelist = uf. UploadAll ();}

Files can be uploaded easily.

The original upload without refreshing is canceled here.

 

 

The following describes how to encapsulate an Asp. Net Web control.

First, create a class to inherit Control

[ToolboxData("<{0}:UploadControl runat=\"server\"></{0}:UploadControl>")]public class UploadControl : Control

 

This control has two attributes: the number of uploaded files and the type of files that can be uploaded,

As follows:

[Category ("Behavior")] [DefaultValue (0)] [Description ("Maximum number of uploaded files, 0 expressions, unlimited")] public int MaxFileNumbers {get {object s = ViewState ["_ MaxFileNumbers. hxj. web. UI. uploadControl "]; int numbers = 0; if (null = s) return numbers; int. tryParse (s. toString (), out numbers); if (numbers <0) numbers = 0; return numbers;} set {ViewState ["_ MaxFileNumbers. hxj. web. UI. uploadControl "] = value;} [Category (" Behavior ")] [DefaultValue (" * ")] [Description (" extensions allowed for upload, separated by commas, use * ")] public string AllowExtensions {get {object extension = ViewState [" _ AllowExtensions. hxj. web. UI. uploadControl "]; if (null = extension) return" * "; return extension. toString ();} set {ViewState ["_ AllowExtensions. hxj. web. UI. uploadControl "] = value ;}}

 

Next, output the Html information to be rendered, and output Html in the void Render (HtmlTextWriter writer) event,

The Code is as follows:

Protected override void Render (HtmlTextWriter writer) {// verify that the control must be added to the Form. Otherwise, if (null! = Page) {Page. verifyRenderingInServerForm (this);} StringBuilder html = new StringBuilder (); html. append ("<table border = \" 0 \ "cellspacing = \" 1 \ "class = \" fu_list \ "id = \" "); html. append (this. clientID); html. append ("\"> <tbody> <tr> <td align = \ "right \" width = \ "15% \" style = \ "line-height: 35px; \ "> Add file: </td> <a href = \" javascript: void (0 ); \ "class = \" files \ "id = \" "); html. append (this. clientID); html. append (" File \ "> </a>  </td> <td align = \" center \ "> <input type = \" button \ "value = \" cancel all \ "id = \""); html. append (this. clientID); html. append ("Btndel \" disabled = \ "disabled \"/> </td> </tr> <td colspan = \ "3 \"> <table border = \ "0 \" cellspacing = \ "0 \"> <thead> <tr> <td> file path </td> <td width = \ "100 \"> </ td> </tr> </th Ead> <tbody id = \ ""); html. append (this. clientID); html. append ("FileList \"> </tbody> </table> </td> </tr> "); if (MaxFileNumbers> 0 |! IsAllowAll () {html. append ("<tr> <td colspan = \" 3 \ "style = \" color: gray \ "> tip:"); if (MaxFileNumbers> 0) {html. append ("up to <B id = \" "); html. append (this. clientID); html. append ("Limit \"> </B> files, ") ;}if (! IsAllowAll () {html. append ("only allow upload <B id = \" "); html. append (this. clientID); html. append ("Ext \"> </B> file. ");} Html. append ("</td> </tr>");} html. append ("</tbody> </table>"); writer. write (html. toString ());}

This method is messy, not recommended.

 

The next step is to reference the script, reference css, and output the script, which is completed in the void OnPreRender (EventArgs e) event.

The Code is as follows:

Protected override void OnPreRender (EventArgs e) {this. page. form. attributes. remove ("enctype"); this. page. form. attributes. add ("enctype", "multipart/form-data"); if (! Page. clientScript. isClientScriptIncludeRegistered ("UploadControlJS") Page. clientScript. registerClientScriptInclude ("UploadControlJS", Page. clientScript. getWebResourceUrl (this. getType (), "Hxj. web. UI. js. fileupload. js "); string strCssLink = string. concat ("<link href = '", this. page. clientScript. getWebResourceUrl (this. getType (), "Hxj.Web.UI.css.fileupload.css"), "'rel = 'stylesheet 'type = 'text/css'/> "); String cssKey = "UploadControlCSS"; if (Page. header. findControl (cssKey) = null) {Literal ltlCss = new Literal (); ltlCss. ID = cssKey; ltlCss. text = strCssLink; this. parent. page. header. controls. add (ltlCss);} StringBuilder script = new StringBuilder (); script. appendLine (); script. append ("var"); script. append (this. clientID); script. append ("fu = new FileUpload (\" "); script. append (this. page. form. C LientID); script. append ("\", \ ""); script. append (this. clientID); script. append ("File \", {Limit: "); if (MaxFileNumbers = 0) {script. append ("9999");} else {script. append (MaxFileNumbers. toString ();} script. append (","); if (! IsAllowAll () {script. Append ("ExtIn: ["); string extensions = AllowExtensions; if (! String. isNullOrEmpty (extensions) {StringBuilder extin = new StringBuilder (); string [] exts = extensions. split (','); foreach (string ext in exts) {extin. append (","); extin. append ("\" "); extin. append (ext); extin. append ("\" ");} script. append (extin. toString (). substring (1);} script. appendLine ("],");} script. append ("FileName: \" "); script. append (this. clientID); script. appendLine ("mf \", "); script. A PpendLine ("onIniFile: function (file) {file. value? File. style. display = \ "none \": this. folder. removeChild (file) ;}, "); script. appendLine ("onEmpty: function () {alert (\" select a file \ ") ;},"); script. appendLine ("onLimite: function () {alert (\" can only upload at the same time \ "+ this. limit + \ "files \") ;}, "); script. appendLine ("onSame: function () {alert (\" same file already exists \ ") ;},"); script. appendLine ("onNotExtIn: function () {alert (\" only allow upload \ "+ this. extIn. join (\ ", \") + \ "file \") ;}, "); script. A PpendLine ("onExtOut: function () {alert (\" Upload prohibited \ "+ this. extOut. join (\ ", \") + \ "file \") ;}, "); script. appendLine ("onFail: function (file) {this. folder. removeChild (file) ;}, "); script. append (@ "onIni: function () {var arrRows = []; if (this. files. length) {var oThis = this; Each (this. files, function (o) {var a = document. createElement ("" a "");. innerHTML = "" cancel "";. href = "" javascript: void (0); "";. onclick = Function () {oThis. delete (o); return false ;}; arrRows. push ([o. value, a]);} else {arrRows. push (["" <font color = 'Gray '> no file added </font> "", "" & nbsp; ""]);} AddList (arrRows, "); script. append (this. clientID); script. append ("FileList \"); "); script. append ("$ (\" "); script. append (this. clientID); script. append ("Btndel \"). disabled = this. files. length <= 0 ;}}); "); if (MaxFileNumbers> 0) {script. append ("$ (\ ""); Script. append (this. clientID); script. append ("Limit \"). innerHTML = "); script. append (this. clientID); script. append ("fu. limit; ") ;}if (! IsAllowAll () {script. append ("$ (\" "); script. append (this. clientID); script. append ("Ext \"). innerHTML = "); script. append (this. clientID); script. append ("fu. extIn. join (\ ", \"); ");} script. append ("$ (\" "); script. append (this. clientID); script. append ("Btndel \"). onclick = function () {"); script. append (this. clientID); script. append ("fu. clear () ;}"); if (! This. page. clientScript. isStartupScriptRegistered ("UploadControlStartscript") this. page. clientScript. registerStartupScript (typeof (string), "UploadControlStartscript", script. toString (), true); base. onPreRender (e );}

 

Of course, you also need to reference the source file.

[assembly: WebResource("Hxj.Web.UI.js.fileupload.js", "text/javascript")][assembly: WebResource("Hxj.Web.UI.css.fileupload.css", "text/css", PerformSubstitution = true)][assembly: WebResource("Hxj.Web.UI.img.fu_btn.gif", "img/gif")]

 

Among them, the parameter msubstitution setting is set to true for reference to other resource files. In this case, the image hxj.web.ui.img.fu_btn.gif is used.

Here, the first parameter of WebResource is composed of Assembly + path + resource file name.

 

Such a control is encapsulated.

 

Download