欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-03-27 23:45:17
上传和下载是很常用的功能了,只有当用到的时候才发现不会写...,经过一番百度、筛选、整理修改后,实现了功能,下面简单的记录下实现方法。 一、上传功能 1.前端代码 2.后台代码 二、下载功能 1.前端代码 2.后台代码 三、遇到的问题 1.写了个测试的html页,如何让程序运行时打开这个页面,在默认 ......

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

一、上传功能

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.后台代码

 1         /// <summary>
 2         /// 上传文件
 3         /// </summary>
 4         [httppost]
 5         public string uploadfile()
 6         {
 7             string result = string.empty;
 8             try
 9             {
10                 string uploadpath = httpcontext.current.server.mappath("~/app_data/");
11                 httprequest request = system.web.httpcontext.current.request;
12                 httpfilecollection filecollection = request.files;
13                 // 判断是否有文件
14                 if (filecollection.count > 0)
15                 {
16                     // 获取文件
17                     httppostedfile httppostedfile = filecollection[0];
18                     string fileextension = path.getextension(httppostedfile.filename);// 文件扩展名
19                     string filename = guid.newguid().tostring() + fileextension;// 名称
20                     string filepath = uploadpath + httppostedfile.filename;// 上传路径
21                     // 如果目录不存在则要先创建
22                     if (!directory.exists(uploadpath))
23                     {
24                         directory.createdirectory(uploadpath);
25                     }
26                     // 保存新的文件
27                     while (file.exists(filepath))
28                     {
29                         filename = guid.newguid().tostring() + fileextension;
30                         filepath = uploadpath + filename;
31                     }
32                     httppostedfile.saveas(filepath);
33                     result = "上传成功";
34                 }
35             }
36             catch (exception)
37             {
38                 result = "上传失败";
39             }
40             return result;
41         }

 

二、下载功能

1.前端代码

 1 <form action="../api/file/downloadfile" method="get" id="form">
 2    下载文件 <input type="text" id="name" name="filename" value="222" />
 3 </form>
 4 <input type="button" id="download" value="下载文件" />
 5 
 6 <script>
 7     //下载
 8     $("#download").click(function () {
 9         var form = $("#form");
10         form.submit();
11     });
12 </script>

2.后台代码

 1         /// <summary>
 2         /// 下载文件
 3         /// </summary>
 4         /// <param name="filename"></param>
 5         [httpget]
 6         public void downloadfile(string filename)
 7         {
 8             string filepath = path.combine(httpcontext.current.server.mappath("~/app_data/"), filename);
 9             if (file.exists(filepath))
10             {
11                 httpresponse response = httpcontext.current.response;
12                 response.clear();
13                 response.clearheaders();
14                 response.clearcontent();
15                 response.buffer = true;
16                 response.addheader("content-disposition", string.format("attachment; filename={0}", filename));
17                 response.charset = "gb2312";
18                 response.contentencoding = encoding.getencoding("gb2312");
19                 response.contenttype = mimemapping.getmimemapping(filename);
20                 response.writefile(filepath);
21                 response.flush();
22                 response.close();
23             }
24         }

三、遇到的问题

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

httpcontext.response.redirect("html/index.html", true);

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

 2.跨域问题

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

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

1   <system.webserver>
2     <httpprotocol>
3       <customheaders>
4         <add name="access-control-allow-origin" value="*"/>
5         <add name="access-control-allow-headers" value="x-requested-with,content-type,accept,origin"/>
6         <add name="access-control-allow-methods" value="get,post,put,delete,options"/>
7       </customheaders>    
8     </httpprotocol>
9   </system.webserver>

详情可阅读:

demo下载:https://pan.baidu.com/s/1zv1-4wvrp3ztwwtdfamexq