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);
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>
详情可阅读:
上一篇: 人口老龄化程度可以这样衡量
下一篇: 数据库事务的四大特性以及事务的隔离级别