ASP.NET Core 1.0中实现文件上传的两种方式（提交表单和采用AJAX）HTML form for uploading filesConstructor and UploadFiles() GET actionUploadFiles() POST actionUsing jQuery Ajax to upload the files

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.

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

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:

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

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:

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

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:

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:

Then add a <script> reference to the jQuery library and write

the following code to handle the click event of the upload button:

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:

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

如果你想及时得到个人撰写文章以及著作的消息推送，或者想看看个人推荐的技术资料，可以扫描左边二维码（或者长按识别二维码）关注个人公众号（原来公众帐号蒋金楠的自媒体将会停用）。

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

<a href="http://www.cnblogs.com/artech/p/upload-files-in-asp-net-core.html" target="_blank">原文链接</a>