Preface
Uploading files should be a very common and indispensable operation, and there are many upload controls provided on the Internet. I encountered a problem today: the input control file cannot be uploaded asynchronously without refresh. It's really awkward. So I tried this and deal with it. It is mainly divided into three parts: the encapsulation of the upload class, the processing of the html input control file and the call of the background controller.
Upload encapsulation class:
This class has two main functions, some simple filtering and file renaming operations.
File filtering includes:
File type, file size
Rename:
The default is not to perform renaming operations, and the default is to the time string ("yyyyMMddHHmmss")
File address:
Customizable. Both relative and absolute addresses are OK.
using System;
using ;
using ;
using ;
using ;
using ;
using ;
namespace CommonHelper
{
public class UploadFile :
{
public UploadFile()
{
}
//error message public string msg { get; set; }
public string FullName { get; set; }
//File name public string FileName { get; set; }
/// <summary>
/// Upload file /// by wyl 20161019
/// </summary>
/// <param name="filepath">File upload address</param> /// <param name="size">File Specified Size</param> /// <param name="filetype">File type</param> /// <param name="files">file uploaded file</param> /// <param name="isrename">Does it be duplicate?</param> /// <returns></returns>
public bool upload_file(string filepath, int size, string[] filetype, bool isrename = false)
{
filepath = (filepath);
// Create the folder if it does not exist if (!(filepath))
(filepath);
if ( == 0)
{
msg = "File upload failed";
return false;
}
msg = "Uploaded successfully";
var file = [0];
if ( == 0)
{
msg = "File size is 0";
return false;
}
if ( > size * 1024)
{
msg = "File exceeds the specified size";
return false;
}
var filex = [0];
string fileExt = ().ToLower();
if ((a => a == fileExt) < 1)
{
msg = "File type not supported";
return false;
}
if (isrename)
FileName = ("yyyyMMddHHmmss") + fileExt;
FileName = ;
FullName = (filepath, FileName);
(FullName);
return true;
}
}
}
There is no introduction to the method of uploading files here. It should be easy to understand when reading the code comments.
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 name="F2" style="display: none"> <html> <head></head> <body></body> </html> </iframe> </form> </div>
Note: Because the mvc upload file input control file does not support asynchronous refresh-free upload, the upload without refresh operation is performed by calling the call to jump to the iframe.
The above page is the html definition of the upload control. There are a few things to pay attention to
="multipart/form-data" must be added. The enctype="multipart/form-data" in the form means to set the MIME encoding of the form. By default, this encoding format is application/x-www-form-urlencoded, which cannot be used for file upload; only by using multipart/form-data can the file data be fully passed and the following operations are performed. enctype="multipart/form-data" is to upload binary data; the input value in form is passed in binary mode.
Add the name of
3. The submit button is submit. Of course, if you want to write js, set it to button. There is nothing to say about this.
style="display: none"
The above is the entire layout and submitting upload files to the background and jump to the ifom. The next step is to accept the method of calling the upload files above. Then prompt to upload the results on the iframe page, and then close the iframe.
Background code:
[HttpPost]
public ActionResult FileUpload()
{
//Get support upload file format from configuration file string[] fileType = ["fileType"].Split('|');
//Upload file path string strPath = ["strPath"];
UploadFile file= new UploadFile();
bool flag = file.upload_file(strPath, 25000, fileType);
return Content("<script>('" + + "');()</script>");
}
Note:
1. File path and file saving path are placed in the configuration file. Of course, you can also place the file size and whether to rename it in the configuration file.
2. The script that returns to the view first pops up the prompt box; close the window
3. Call UploadFile's msg (Error prompt), FullName (full name), FileName file name according to your own needs
() Close the window of the current iframe. Please handle the compatibility by yourself. I have no problem with the test.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.