در این مقاله قصد داریم نحوه آپلود کردن فایل را با استفاده از Web API و با کمک Jquery را توضیح دهیم.درادامه با مفاهیم Web API آشنا می شویم.

- آشنایی با Web API

- نحوه ذخیره و نمایش  داده ها با Web API در ASP.NET MVC5

- نحوه ارسال داده در Web API با استفاده از Jquery

پیاده سازی API Service   برای آپلود فایل در سرور

1.یک API Controller ، به نام UploadapiController ایجاد می کنیم .

2.یک پوشه به نام UploadFiles در Solution ایجاد می کنیم .

2.کدهای زیر را جایگزین کدهای Controllerای که ایجاد کرده ایم،می کنیم .

1. using System;  
2. using System.Collections.Generic;  
3. using System.IO;  
4. using System.Linq;  
5. using System.Net;  
6. using System.Net.Http;  
7. using System.Threading.Tasks;  
8. using System.Web;  
9. using System.Web.Http;  
10. namespace WebApiExample.Controllers {  
11.     public class UploadapiController: ApiController {  
12.         public Task Post() {  
13.             List savedFilePath = new List();  
14.             if (!Request.Content.IsMimeMultipartContent()) {  
15.                 throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);  
16.             }  
17.             string rootPath = HttpContext.Current.Server.MapPath("~/UploadedFiles");  
18.             var provider = new MultipartFileStreamProvider(rootPath);  
19.             var task = Request.Content.ReadAsMultipartAsync(provider).  
20.             ContinueWith(t => {  
21.                 if (t.IsCanceled || t.IsFaulted) {  
22.                     Request.CreateErrorResponse(HttpStatusCode.InternalServerError, t.Exception);  
23.                 }  
24.                 foreach(MultipartFileData item in provider.FileData) {  
25.                     try {  
26.                         string name = item.Headers.ContentDisposition.FileName.Replace("\"", "");  
27.                         string newFileName = Guid.NewGuid() + Path.GetExtension(name);  
28.                         File.Move(item.LocalFileName, Path.Combine(rootPath, newFileName));  
29.                         Uri baseuri = new Uri(Request.RequestUri.AbsoluteUri.Replace(Request.RequestUri.PathAndQuery, string.Empty));  
30.                         string fileRelativePath = "~/UploadedFiles/" + newFileName;  
31.                         Uri fileFullPath = new Uri(baseuri, VirtualPathUtility.ToAbsolute(fileRelativePath));  
32.                         savedFilePath.Add(fileFullPath.ToString());  
33.                     } catch (Exception ex) {  
34.                         string message = ex.Message;  
35.                     }  
36.                 }  
37.                 return Request.CreateResponse(HttpStatusCode.Created, savedFilePath);  
38.             });  
39.             return task;  
40.         }  
41.     }  
42. }  

افزودن Controller برای نمایش فایل آپلود

1 . بر روی پوشه Controllers کلیک راست کرده و در قسمت ADD ، Controller را انتخاب می کنیم .

1. public class UploadController: Controller {  
2.     // GET: Upload  
3.     public ActionResult Index() {  
4.         return View();  
5.     }  
6. } 

2.حال ، یک View برای متد Index   ایجاد می کنیم .

3.کد زیر را جایگزین کد قبلی می کنیم .

1. @{  
2. ViewBag.Title = "www.mitechdev.com";  
3. }  
4. <script src="~/Scripts/jquery-1.10.2.min.js"></script>  
5. <h2>برنامه نویسان</h2>  
6.   
7. <div class="panel panel-info">  
8. <div class="panel-heading">  

فایل آپلود در Web API

1. </div>  
2. <div class="panel-body">  
3.     <div class="form-group"> <input type="file" id="uploadfile" /> </div> <input id="btnSubmit" class="btn btn-default" type="button" value="آپلود" />  
4.     <div class="text-info" id="status"></div>  
5. </div>  
6. </div>  
7. <script>  
8.     $(document).ready(function() {  
9.         $('#btnSubmit').click(function() {  
10.             if ($('#uploadfile').val() == '') {  
11.                 alert('لفطا فایل خود را انتخاب کنید ');  
12.                 return;  
13.             }  
14.             var formData = new FormData();  
15.             var file = $('#uploadfile')[0];  
16.             formData.append('file', file.files[0]);  
17.             $.ajax({  
18.                 url: 'http://localhost:28335/api/Uploadapi',  
19.                 type: 'POST',  
20.                 data: formData,  
21.                 contentType: false,  
22.                 processData: false,  
23.                 success: function(d) {  
24.                     $("#status").html("<span>File uploaded here: <a class='text-success' href=" + d + ">Open File</a></span>");  
25.                     $('#uploadfile').val(null);  
26.                 },  
27.                 error: function() {  
28.                     alert("لطفا دوباره امتحان کنید");  
29.                 }  
30.             });  
31.         });  
32.     });  
33. </script>  

4.دراین قسمت ، یک شی FormDate( ) ایجاد کرده ایم و فایل را به API Controller ارسال می کنیم .

5.برنامه را اجرا می کنیم .

6. بعد آپلود فایل میتوان با کلیک بر روی لینک زیر میتوان آن را مشاهده کنید .