1.前提,设置跨域

2.在控制器头添加允许跨域

  /// <summary>
/// 文件管理口控制器
/// </summary>
[EnableCors("*", "*", "*")]
[RoutePrefix("File")]
public class FileController

3.上传方法

  /// <summary>
/// 图片上传 [FromBody]string token
/// </summary>
/// <returns></returns>
[HttpPost]
[Route("Upload/ImgUpload")]
public ResponseModel ImgUpload()
{
ResponseModel response = new ResponseModel();
// 文件保存目录路径
const string saveTempPath = "~/UploadFiles/";
if (!Directory.Exists(HttpContext.Current.Server.MapPath(saveTempPath)))
{
Directory.CreateDirectory(HttpContext.Current.Server.MapPath(saveTempPath));
}
HttpFileCollection files = HttpContext.Current.Request.Files;
const string fileTypes = "gif,jpg,jpeg,png,bmp";
foreach (string key in files.AllKeys)
{
HttpPostedFile file = files[key];//file.ContentLength文件长度 if (file.ContentLength > AllConfig.CommonStaticConfigInfo.MaxFileSize * 1024)
{
response.Fail("上传文件大小超过限制。");
return response;
}
else
{
var fileExt = file.FileName.Substring(file.FileName.LastIndexOf('.')); if (String.IsNullOrEmpty(fileExt) ||
Array.IndexOf(fileTypes.Split(','), fileExt.Substring(1).ToLower()) == -1)
{
response.Fail("不支持上传文件类型。");
return response;
}
else
{
if (string.IsNullOrEmpty(file.FileName) == false)
file.SaveAs(HttpContext.Current.Server.MapPath(saveTempPath) + file.FileName);
}
}
}
return response;
}

ResponseModel是自己实现的,有兴趣也可以看看,返回自己实现吧。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks; namespace Model
{
/// <summary>
/// 响应参数父级类型
/// </summary>
public class ResponseModel
{ /// <summary>
/// 构造
/// </summary>
public ResponseModel()
{
State = (int)RequestStateEnum.Success;
Msg = "成功";
}
/// <summary>
/// 构造
/// </summary>
/// <param name="state">请求状态</param>
/// <param name="callback">透传字段</param>
/// <param name="postTime">请求时间</param>
/// <param name="msg">返回信息</param>
public ResponseModel(RequestStateEnum state, string callback, string postTime, string msg)
{
State = (int)state;
Callback = callback;
PostTime = postTime;
Msg = msg;
}
/// <summary>
/// 构造
/// </summary>
/// <param name="callback">透传字段</param>
/// <param name="postTime">请求时间</param>
/// <param name="msg">返回信息</param>
public ResponseModel(string callback, string postTime, string msg)
{
State = (int)RequestStateEnum.Success;
Callback = callback;
PostTime = postTime;
Msg = msg;
}
/// <summary>
/// 构造
/// </summary>
/// <param name="callback">透传字段</param>
/// <param name="postTime">请求时间</param>
public ResponseModel(string callback, string postTime)
{
State = (int)RequestStateEnum.Success;
Callback = callback;
PostTime = postTime;
Msg = "成功";
}
/// <summary>
/// 请求状态
/// </summary>
public int State { get; protected set; }
/// <summary>
/// 透传字段
/// </summary>
public string Callback { get; set; } /// <summary>
/// 请求时间
/// </summary>
public string PostTime { get; set; } /// <summary>
/// 返回信息
/// </summary>
public string Msg { get; protected set; } /// <summary>
/// 错误
/// </summary>
/// <param name="msg"></param>
/// <param name="state"></param>
public void Fail(string msg, RequestStateEnum state = RequestStateEnum.Error)
{
Msg = msg;
State = (int)state;
}
/// <summary>
/// 错误,根据错误短语获取错误详细描述
/// </summary>
/// <param name="shortMsg">错误短语</param>
public void Fails(string shortMsg)
{
Msg = AllMsg.GetMsg(shortMsg);
State = (int)RequestStateEnum.Error;
} /// <summary>
/// 系统级错误
/// </summary>
/// <param name="msg"></param>
public void SystemErr(string msg)
{
Msg = msg;
State = (int)RequestStateEnum.SystemErr;
} /// <summary>
/// 成功
/// </summary>
/// <param name="msg"></param>
/// <param name="state"></param>
public void Success(string msg, RequestStateEnum state = RequestStateEnum.Success)
{
this.Msg = msg;
State = (int)RequestStateEnum.Success;
}
/// <summary>
/// 未登录验证
/// </summary>
public void NeedLogin()
{
this.Msg = "请登录系统后再进行操作!";
State = (int)RequestStateEnum.NeedLogin;
}
private string RealName;
public void SetRealName(string realName)
{
RealName = realName;
} public string GetRealName() { return RealName; } private string RequestJson; public void SetRequestJson(string requestJson)
{
RequestJson = requestJson;
} public string GetRequestJson() { return RequestJson; }
} /// <summary>
/// 返回的父级类型
/// </summary>
/// <typeparam name="T"></typeparam>
public class ResponseModel<T> : ResponseModel where T : new()
{ /// <summary>
/// 构造
/// </summary>
/// <param name="state">请求状态</param>
/// <param name="callback">透传字段</param>
/// <param name="postTime">请求时间</param>
/// <param name="msg">返回信息</param>
/// <param name="postContent">返回泛型</param>
public ResponseModel(RequestStateEnum state, string callback, string postTime, string msg, T postContent)
{
State = (int)state;
Callback = callback;
PostTime = postTime;
Msg = msg;
PostContent = postContent;
}
/// <summary>
/// 构造
/// </summary>
/// <param name="callback">透传字段</param>
/// <param name="postTime">请求时间</param>
/// <param name="msg">返回信息</param>
public ResponseModel(string callback, string postTime, string msg) : base(callback, postTime, msg)
{
//PostContent = new T();
}
/// <summary>
/// 构造
/// </summary>
/// <param name="callback">透传字段</param>
/// <param name="postTime">请求时间</param>
public ResponseModel(string callback, string postTime) : base(callback, postTime)
{ //PostContent = new T();
}
/// <summary>
/// 构造
/// </summary>
public ResponseModel()
{
PostContent = new T();
}
/// <summary>
/// 请求内容类以及返回内容类
/// </summary>
public T PostContent { get; set; } /// <summary>
/// 错误
/// </summary>
/// <param name="msg"></param>
/// <param name="state"></param>
/// <param name="obj"></param>
public void Fail(string msg, T obj, RequestStateEnum state = RequestStateEnum.Error)
{
PostContent = obj;
Msg = msg;
State = (int)state;
} /// <summary>
/// 成功
/// </summary>
/// <param name="obj"></param>
/// <param name="msg"></param>
/// <param name="state"></param>
public void Success(T obj, string msg = null, RequestStateEnum state = RequestStateEnum.Success)
{
Msg = msg;
this.PostContent = obj;
State = (int)state;
}
/// <summary>
/// 成功
/// </summary>
/// <param name="obj"></param>
public void Success(T obj)
{
this.PostContent = obj;
State = (int)RequestStateEnum.Success;
}
} }

4.html代码

<!doctype>
<head>
<script src="jquery-1.10.2.min.js"></script>
<!--<script src="jquery-1.11.1.js"></script>-->
<!--<script src="ajaxfileupload.js"></script>-->
<script>
$(document).ready(function () {
var appDomain = "http://localhost/TLSC.Api.File/";
$("#btn_fileUpload").click(function () {
/**
* 用ajax方式上传文件 -----------
* */
//-------asp.net webapi fileUpload
//
var formData = new FormData($("#uploadForm")[0]);
$.ajax({
url: appDomain + 'File/Upload/ImgUpload',
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (data) {
console.log(JSON.stringify(data));
},
error: function (data) {
console.log(JSON.stringify(data));
}
});
//----end asp.net webapi fileUpload
//----.net core webapi fileUpload
// var fileUpload = $("#files").get(0);
// var files = fileUpload.files;
// var data = new FormData();
// for (var i = 0; i < files.length; i++) {
// data.append(files[i].name, files[i]);
// }
// $.ajax({
// type: "POST",
// url: appDomain+'api/Files',
// contentType: false,
// processData: false,
// data: data,
// success: function (data) {
// console.log(JSON.stringify(data));
// },
// error: function () {
// console.log(JSON.stringify(data));
// }
// });
//--------end net core webapi fileUpload
/**
* ajaxfileupload.js 方式上传文件
* */
// $.ajaxFileUpload({
// type: 'post',
// url: appDomain + 'api/Files',
// secureuri: false,
// fileElementId: 'files',
// success: function (data) {
// console.log(JSON.stringify(data));
// },
// error: function () {
// console.log(JSON.stringify(data));
// }
// });
});
//end click
})
</script>
</head>
<title></title>
<body>
<article>
<header>
<h2>article-form</h2>
</header>
<p>
<form action="/" method="post" id="uploadForm" enctype="multipart/form-data">
<input type="file" id="files" name="files" placeholder="file" multiple>file-multiple属性可以选择多项<br><br>
<input type="button" id="btn_fileUpload" value="fileUpload">
</form>
</p>
</article>
</body>

6.上传成功

demo就不贴了,拷贝上面的代码直接写就行了。

1.5 WEB API 上传文件的更多相关文章

  1. 演示如何通过 web api 上传文件MVC40

    演示如何通过 web api 上传文件WebApiWebFormHost/UploadFileController.cs /* * 通过 web api 上传文件 */ using System; u ...

  2. 返璞归真 asp.net mvc (11) - asp.net mvc 4.0 新特性之自宿主 Web API, 在 WebForm 中提供 Web API, 通过 Web API 上传文件, .net 4.5 带来的更方便的异步操作

    原文:返璞归真 asp.net mvc (11) - asp.net mvc 4.0 新特性之自宿主 Web API, 在 WebForm 中提供 Web API, 通过 Web API 上传文件, ...

  3. C# Web Api 上传文件

    一. 使用默认方法上传文件: 1.Action: /// <summary> /// 上传文件 使用上传后的默认文件名称 /// 默认名称是BodyPart_XXXXXX,BodyPart ...

  4. 前端AngularJS后端ASP.NET Web API上传文件

    本篇体验使用AngularJS向后端ASP.NET API控制器上传文件.    首先服务端: public class FilesController : ApiController { //usi ...

  5. HttpClient 测试web API上传文件实例

    1.使用HttpClient 测试上传文件并且设置header信息: using Lemon.Common; using Newtonsoft.Json; using System; using Sy ...

  6. ASP.NET Web API 上传文件

    HTML表单: <form id="form1" method="post" enctype="multipart/form-data" ...

  7. 数据採集之Web端上传文件到Hadoop HDFS

    前言 近期在公司接到一个任务.是关于数据採集方面的. 需求主要有3个: 通过web端上传文件到HDFS; 通过日志採集的方式导入到HDFS; 将数据库DB的表数据导入到HDFS. 正好近期都有在这方面 ...

  8. php 下 html5 XHR2 + FormData + File API 上传文件

    FormData的作用: FormData对象可以帮助我们自动的打包表单数据,通过XMLHttpRequest的send()方法来提交表单.当然FormData也可以动态的append数据.FormD ...

  9. Web API 上传下载文件

    1.引用了一个第三方组件 ICSharpCode.SharpZipLib.Zip; 2.具体代码 实体类,可以用hashtable 替代 ,感觉hashtable 比较灵活 public class ...

随机推荐

  1. JS基础二

    JS的实现: 核心:ECMAScript ECMAScript 并不与任何具体浏览器相绑定,实际上,它也没有提到用于任何用户输入输出的方法(这点与 C 这类语言不同,它需要依赖外部的库来完成这类任务) ...

  2. poj-1503-java大数相加

    Description One of the first users of BIT's new supercomputer was Chip Diller. He extended his explo ...

  3. Nginx代理转发Apache+svn

    1.安装svn和httpd yum install httpd yum install subversion mod_dav_svn 创建仓库目录 mkdir -p /var/www/svn 3.创建 ...

  4. WebAPI问题追踪日志记录过滤器

    公司项目比较坑爹,毕竟涉及到前后端分离.多部门协作,很多时候系统出问题,哪怕已经很清楚了,协作方依然要我们把API调用入参.响应等记录下来,而且是全记录,不光是异常调用,待调查结束后这些日志又需要卸下 ...

  5. vmware虚拟机和网络中的桥接和NAT

    vmware虚拟机和网络中的桥接和NAT 有许多人在网上回答类似的问题,但大多说的不够简单,且互相抄袭的嫌疑很大,这里我尽自己努力把问题说的明白一些 首先解释一下什么是NAT(network addr ...

  6. linux小白成长之路6————安装Java+Apache(httpd)+Tomcat

    [内容指引] 安装Java环境: 查看JDK版本: 安装Apache(httpd); 安装Tomcat: 设置服务开机启动. 1.安装Java环境 指令: yum intall java-1.8.0* ...

  7. Notepad++中实现Markdown语法高亮与实时预览

    Notepad ++是一个十分强大的编辑器,除了可以用来制作一般的纯文字说明文件,也十分适合编写计算机程序代码.Notepad ++不仅有语法高亮度显示,也有语法折叠功能,并且支持宏以及扩充基本功能的 ...

  8. Java基础学习笔记四 Java基础语法

    数组 数组的需求 现在需要统计某公司员工的工资情况,例如计算平均工资.最高工资等.假设该公司有50名员工,用前面所学的知识完成,那么程序首先需要声明50个变量来分别记住每位员工的工资,这样做会显得很麻 ...

  9. JavaScript(第二十一天)【DOM元素尺寸和位置】

    学习要点: 1.获取元素CSS大小 2.获取元素实际大小 3.获取元素周边大小 本章,我们主要讨论一下页面中的某一个元素它的各种大小和各种位置的计算方式,以便更好的理解.   一.获取元素CSS大小 ...

  10. Beta Scrum Day 5

    听说