博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ASP.NET Core 1.0中实现文件上传的两种方式(提交表单和采用AJAX)
阅读量:6839 次
发布时间:2019-06-26

本文共 7193 字,大约阅读时间需要 23 分钟。

Bipin Joshi ()


Uploading files is a common requirement in web applications. In ASP.NET Core 1.0 uploading files and saving them on the server is quite easy. To that end this article shows how to do just that.Begin by creating a new ASP.NET Core project. Then add HomeController to the controllers folder. Then add UploadFiles view to Views > Home folder of the application.

HTML form for uploading files

Open the UploadFiles view and add the following HTML markup in it:

1: 
2:       asp-controller="Home"
3:       method="post"
4:       enctype="multipart/form-data">
5:     
6:     
7: 

The above markup uses form tag helper of ASP.NET Core MVC. The asp-action attribute indicates that the form will be processed by the UploadFiles action upon submission. The asp-controller attribute specifies the name of the controller containing the action method. The form is submitted using POST method. The enctype attribute of the form is set to multipart/form-data indicating that it will be used for file upload operation.

The form contains an input field of type file. The name attribute of the file input field is set to files and the presence of multiple attribute indicates that multiple files can be uploaded at once. The submit button submits the form to the server.

If you run the application at this stage, the UploadFiles view should look like this:

Constructor and UploadFiles() GET action

Now, open the HomeController and add a constructor to it as shown below:

1: public class HomeController : Controller
2: {
3:     private IHostingEnvironment hostingEnv;
4:     public HomeController(IHostingEnvironment env)
5:     {
6:         this.hostingEnv = env;
7:     }
8: }

The constructor has a parameter of type IHostingEnvironment (Microsoft.AspNet.Hosting namespace). This parameter will be injected by MVC framework into the constructor. You need this parameter to construct the full path for saving the uploaded files. The IHostingEnvironment object is saved into a local variable for later use.

Then add UploadFiles() action for GET requests as shown below:

1: public IActionResult UploadFiles()
2: {
3:     return View();
4: }

UploadFiles() POST action

Finally, add UploadFiles() action for handling the POST requests.

1: [HttpPost]
2: public IActionResult UploadFiles(IList
files)
3: {
4:     long size = 0;
5:     foreach(var file in files)
6:     {
7:         var filename = ContentDispositionHeaderValue
8:                         .Parse(file.ContentDisposition)
9:                         .FileName
10:                         .Trim('"');
11:         filename = hostingEnv.WebRootPath + $@"\{fileName}";
12:         size += file.Length;
13:         using (FileStream fs = System.IO.File.Create(filename))
14:         {
15:            file.CopyTo(fs);
16:            fs.Flush();
17:         }
18:     }
19: 
20:     ViewBag.Message = $"{files.Count} file(s) /
21:                       {size} bytes uploaded successfully!";
22:     return View();
23: }

The UploadFiles() action has a parameter - IList<IFormFile> - to receive the uploaded files. The IFormFile object represents a single uploaded file. Inside, a size variable keeps track of how much data is being uploaded. Then a foreach loop iterates through the files collection.

The client side file name of an uploaded file is extracted using the ContentDispositionHeaderValue class (Microsoft.Net.Http.Headers namespace) and the ContentDisposition property of the IFormFile object. Let's assume that you wish to save the uploaded files into the wwwroot folder. So, to arrive at the full path you use the WebRootPath property of IHostingEnvironment and append the filename to it.

Finally, the file is saved by the code inside the using block. That code basically creates a new FileStream and copies the uploaded file into it. This is done using the Create() and the CopyTo() methods. A message is stored in ViewBag to be displayed to the end user.

The following figure shows a sample successful run of the application:

Using jQuery Ajax to upload the files

In the preceding example you used form POST to submit the files to the server. What if you wish to send files through Ajax? You can accomplish the task with a little bit of change to the <form> and the action.

Modify the <form> to have a plain push button instead of submit button as shown below:

1: 
2:     
3:            name="files" multiple />
4:     
5:            id="upload"
6:            value="Upload Selected Files" />
7: 

Then add a <script> reference to the jQuery library and write the following code to handle the click event of the upload button:

1: $(document).ready(function () {
2:     $("#upload").click(function (evt) {
3:         var fileUpload = $("#files").get(0);
4:         var files = fileUpload.files;
5:         var data = new FormData();
6:         for (var i = 0; i < files.length ; i++) {
7:             data.append(files[i].name, files[i]);
8:         }
9:         $.ajax({
10:             type: "POST",
11:             url: "/home/UploadFilesAjax",
12:             contentType: false,
13:             processData: false,
14:             data: data,
15:             success: function (message) {
16:                 alert(message);
17:             },
18:             error: function () {
19:                 alert("There was error uploading files!");
20:             }
21:         });
22:     });
23: });

The above code grabs each file from the file field and adds it to a FormData object (HTML5 feature). Then $.ajax() method POSTs the FormData object to the UploadFilesAjax() action of the HomeController. Notice that the contentType and processData properties are set to false since the FormData contains multipart/form-data content. The data property holds the FormData object.

Finally, add UploadFilesAjax() action as follows:

1: [HttpPost]
2: public IActionResult UploadFilesAjax()
3: {
4:     long size = 0;
5:     var files = Request.Form.Files;
6:     foreach (var file in files)
7:     {
8:         var filename = ContentDispositionHeaderValue
9:                         .Parse(file.ContentDisposition)
10:                         .FileName
11:                         .Trim('"');
12:         filename = hostingEnv.WebRootPath + $@"\{filename}";
13:         size += file.Length;
14:         using (FileStream fs = System.IO.File.Create(filename))
15:         {
16:            file.CopyTo(fs);
17:            fs.Flush();
18:         }
19:     }
20:     string message = $"{files.Count} file(s) /
21:                        {size} bytes uploaded successfully!";
22:     return Json(message);
23: }

The code inside UploadFilesAjax() is quite similar to UploadFiles() you wrote earlier. The main difference is how the files are received. The UploadFilesAjax() doesn't have IList<IFormFile> parameter. Instead it receives the files through the Request.Form.Files property. Secondly, the UploadFilesAjax() action returns a JSON string message to the caller for the sake of displaying in the browser.

That's it for now! Keep coding!!

作者:蒋金楠
微信公众账号:大内老A
微博:
如果你想及时得到个人撰写文章以及著作的消息推送,或者想看看个人推荐的技术资料,可以扫描左边二维码(或者长按识别二维码)关注个人公众号(原来公众帐号
蒋金楠的自媒体将会停用)。
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
你可能感兴趣的文章
Effective C++: {}初始化
查看>>
数学之美-【算法】 - 用来流方式计算UV的基数算法
查看>>
about @SuppressWarnings.
查看>>
几种常见的持续集成工具
查看>>
我的友情链接
查看>>
私立SVN服务器
查看>>
GlusterFS集群文件系统
查看>>
MySQL企业版VS社区版
查看>>
WebService环境搭建
查看>>
MySQL表分区的使用
查看>>
2011暑假记事
查看>>
python的包管理pip安装
查看>>
Android开发6——布局中的wrap_content和fill_parent以及match_parent
查看>>
JavaFX 常见问题_网页设计
查看>>
nagios 批量添加监控主机
查看>>
Ubuntu Linux下的QQ使用方案
查看>>
5.Python操作MySQL,三层架构,Socket网络编程
查看>>
分享:40 岁了还在写代码,是一种幸福,还是一种悲哀?
查看>>
Nginx+keepalived做双机热备加tomcat负载均衡
查看>>
Kickstart 部署CentOS6.4
查看>>