WebApi实现单个文件的上传下载

上传和下载是很常用的功能了，只有当用到的时候才发现不会写...，经过一番百度、筛选、整理修改后，实现了功能，下面简单的记录下实现方法。

一、上传功能

1.前端代码

上传文件 <input type="file" id="file" />
<input type="button" id="upload" value="上传文件" />
 
<script>
    //上传
    $("#upload").click(function () {
        var formData = new FormData();
        var file = document.getElementById("file").files[0];
        formData.append("fileInfo", file);
        $.ajax({
            url: "../api/File/UploadFile",
            type: "POST",
            data: formData,
            contentType: false,//必须false才会自动加上正确的Content-Type
            processData: false,//必须false才会避开jQuery对 formdata 的默认处理，XMLHttpRequest会对 formdata 进行正确的处理
            success: function (data) {
                alert(data);
            },
            error: function (data) {
                alert("上传失败！");
            }
        });
    });
</script>

2.后台代码

         /// <summary>
         /// 上传文件
         /// </summary>
         [HttpPost]
         public string UploadFile()
         {
             string result = string.Empty;
             try
             {
                 string uploadPath = HttpContext.Current.Server.MapPath("~/App_Data/");
                 HttpRequest request = System.Web.HttpContext.Current.Request;
                 HttpFileCollection fileCollection = request.Files;
                 // 判断是否有文件
                 if (fileCollection.Count > )
                 {
                     // 获取文件
                     HttpPostedFile httpPostedFile = fileCollection[];
                     string fileExtension = Path.GetExtension(httpPostedFile.FileName);// 文件扩展名
                     string fileName = Guid.NewGuid().ToString() + fileExtension;// 名称
                     string filePath = uploadPath + httpPostedFile.FileName;// 上传路径
                     // 如果目录不存在则要先创建
                     if (!Directory.Exists(uploadPath))
                     {
                         Directory.CreateDirectory(uploadPath);
                     }
                     // 保存新的文件
                     while (File.Exists(filePath))
                     {
                         fileName = Guid.NewGuid().ToString() + fileExtension;
                         filePath = uploadPath + fileName;
                     }
                     httpPostedFile.SaveAs(filePath);
                     result = "上传成功";
                 }
             }
             catch (Exception)
             {
                 result = "上传失败";
             }
             return result;
         }

二、下载功能

1.前端代码

 <form action="../api/File/DownloadFile" method="get" id="form">
    下载文件 <input type="text" id="name" name="fileName" value="222" />
 </form>
 <input type="button" id="download" value="下载文件" />
 
 <script>
     //下载
     $("#download").click(function () {
         var form = $("#form");
         form.submit();
     });
 </script>

2.后台代码

         /// <summary>
         /// 下载文件
         /// </summary>
         [HttpGet]
         public void DownloadFile()
         {
             var request = HttpContext.Current.Request;
             NameValueCollection nvCollection = request.Params;
             string fileName = nvCollection.GetValues("fileName")[];
             string filePath = Path.Combine(HttpContext.Current.Server.MapPath("~/App_Data/"), fileName);
             if (File.Exists(filePath))
             {
                 HttpResponse response = HttpContext.Current.Response;
                 response.Clear();
                 response.ClearHeaders();
                 response.ClearContent();
                 response.Buffer = true;
                 response.AddHeader("content-disposition", string.Format("attachment; FileName={0}", fileName));
                 response.Charset = "GB2312";
                 response.ContentEncoding = Encoding.GetEncoding("GB2312");
                 response.ContentType = MimeMapping.GetMimeMapping(fileName);
                 response.WriteFile(filePath);
                 response.Flush();
                 response.Close();
             }
         }

三、遇到的问题

1.写了个测试的html页，如何让程序运行时打开这个页面，在默认执行的HomeControler中添加重定向代码

HttpContext.Response.Redirect("Html/Index.html", true);

2.跨域问题

当问题1中html页和后端程序分开部署时，就会产生跨域问题

可在web.config中进行如下配置

   <system.webServer>
     <httpProtocol>
       <customHeaders>
         <add name="Access-Control-Allow-Origin" value="*"/>
         <add name="Access-Control-Allow-Headers" value="X-Requested-With,Content-Type,Accept,Origin"/>
         <add name="Access-Control-Allow-Methods" value="GET,POST,PUT,DELETE,OPTIONS"/>
       </customHeaders>
     </httpProtocol>
   </system.webServer>

详情可阅读：https://www.cnblogs.com/landeanfen/p/5177176.html

Demo下载：https://pan.baidu.com/s/1zV1-4WvrP3ZTWwTDFAmExQ