WebApi实现单个文件的上传下载
2021-06-29 10:08
标签:href nload 分享 nbsp create process control gui success 上传和下载是很常用的功能了,只有当用到的时候才发现不会写...,经过一番百度、筛选、整理修改后,实现了功能,下面简单的记录下实现方法。 一、上传功能 1.前端代码 2.后台代码 二、下载功能 1.前端代码 2.后台代码 三、遇到的问题 1.写了个测试的html页,如何让程序运行时打开这个页面,在默认执行的HomeControler中添加重定向代码 2.跨域问题 当问题1中html页和后端程序分开部署时,就会产生跨域问题 可在web.config中进行如下配置 详情可阅读:https://www.cnblogs.com/landeanfen/p/5177176.html Demo下载:https://pan.baidu.com/s/1zV1-4WvrP3ZTWwTDFAmExQ WebApi实现单个文件的上传下载 标签:href nload 分享 nbsp create process control gui success 原文地址:https://www.cnblogs.com/LikeHeart/p/9581878.html上传文件 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>
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>
1 ///
HttpContext.Response.Redirect("Html/Index.html", true);
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>