Mvc file control: the source code of the asynchronous upload without refreshing, mvcfile

Mvc file control: the source code of the asynchronous upload without refreshing, mvcfile

Preface

Uploading files should be a common and essential operation. There are also many upload controls available on the Internet. Today, I encountered a problem: the input control file cannot be asynchronously refreshed. Really awkward. So I tried to handle it. There are three main parts: the encapsulation of the upload class, the file processing of the html input control and the calling of the background controller.

Upload encapsulation class:

These two main functions are some simple filtering and file rename operations.

File filtering includes:

File type, file size

Rename:

By default, the time string DateTime. Now. ToString ("yyyyMMddHHmmss") is renamed ")

File address:

Can be customized. Both the relative and absolute addresses are acceptable.

Using System; using System. collections. generic; using System. linq; using System. text; using System. threading. tasks; using System. IO; using System. web; namespace CommonHelper {public class UploadFile: System. web. UI. page {public UploadFile () {}// error message public string msg {get; set;} public string FullName {get; set ;}// file name public string FileName {get; set ;}//< summary> /// File Upload /// by wyl 20161019 /// </Summary> /// <param name = "filepath"> File Upload address </param> /// <param name = "size"> file size </param> /// <param name = "filetype"> file type </param> /// <param name = "files"> file uploaded file </param>/ // <param name = "isrename"> whether to rename </param> // <returns> </returns> public bool upload_file (string filepath, int size, string [] filetype, bool isrename = false) {filepath = Server. mapPath (filepath); // create if (! Directory. exists (filepath) Directory. createDirectory (filepath); if (HttpContext. current. request. files. count = 0) {msg = "file Upload Failed"; return false;} msg = "uploaded successfully"; var file = HttpContext. current. request. files [0]; if (file. contentLength = 0) {msg = "file size is 0"; return false;} if (file. contentLength> size * 1024) {msg = "the file exceeds the specified size"; return false;} var filex = HttpContext. current. request. files [0]; string fileExt = Path. getExtension (filex. fileName ). toLower (); if (filetype. count (a => a = fileExt) <1) {msg = "file type unsupported"; return false;} if (isrename) FileName = DateTime. now. toString ("yyyyMMddHHmmss") + fileExt; FileName = filex. fileName; FullName = Path. combine (filepath, FileName); file. saveAs (FullName); return true ;}}}

The method for uploading files is not described here. It should be easy to understand the code comment.

Page html

<Div class = "content"> <form method = "post" target = "hidden_frame" enctype = "multipart/form-data" action = "/CustomFrom/FormDesign/FileUpload" name = "form"> <input class = "m input" name = "fileName" type = "file"> <input class = "btn file-input" value = "Submit ... "name =" F2 "type =" submit "> <iframe id =" hidden_frame "name =" F2 "style =" display: none "> 
Note: The mvc file Upload input control file does not support asynchronous upload without refreshing. Therefore, you can call the method to jump to iframe to perform the upload without refreshing.
The above page is the html definition of the upload control. Notes
1. enctype = "multipart/form-data" must be added. enctype = "multipart/form-data" in the form indicates the MIME encoding of the form. By default, the encoding format is application/x-www-form-urlencoded and cannot be used for file upload. Only multipart/form-data can be used to completely transmit file data, perform the following operations. enctype = "multipart/form-data" is used to upload binary data. The input values in form are passed in binary format.
2. Add the form name
3. The submit button is submit. Of course, if you want to write js, set it to button. There is nothing to say about it.
4. style = "display: none" in iframe"
The above figure shows the entire layout and submits the uploaded file to the background, and jumps to ifrom. Next we will accept the method of calling the uploaded file above. Then, the iframe page prompts the upload result and closes the iframe.
Background code:
[HttpPost] public ActionResult FileUpload () {// obtain the format string [] fileType = ConfigurationManager from the configuration file. deleetask[ "fileType"]. split ('|'); // upload file path string strPath = ConfigurationManager. appSettings ["strPath"]; UploadFile file = new UploadFile (); bool flag = file. upload_file (strPath, 25000, fileType); return Content ("<script> window. alert ('"+ file. msg + "'); window. top. close () </script> ");}
Note:
1. The file path is stored in the configuration file. Of course, you can also rename the file size and whether to put it in the configuration file.
2. A prompt box is displayed for the script returned to the view. The window is closed.
3. Call the msg (error prompt), FullName (full name), and FileName file name of UploadFile as needed for operations
4. window. top. close () close the current iframe window. For compatibility, please handle it yourself. I have no problem with the test.
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.