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. 自然语言处理中的自注意力机制(Self-attention Mechanism)

    自然语言处理中的自注意力机制(Self-attention Mechanism) 近年来,注意力(Attention)机制被广泛应用到基于深度学习的自然语言处理(NLP)各个任务中,之前我对早期注意力 ...

  2. linux性能调试之vmstat

    linux性能监控调优工具vmstat: vmstat:用于监控.显示系统运行过程中的虚拟内存/CPU/磁盘状态. 简单示例(时间间隔2s,监控2次): 重要字段解释: r 表示运行队列(等待运行的进 ...

  3. 部署在eclipse上的Tomcat上的publish和clean的区别

    publish:就是把自己的web应用发布到tomcat服务器上没这样才能通过浏览器查看浏览 clean: 就是先清除掉原先编译到tomcat上的程序(多个.class文件),之后再发布. 如:我建了 ...

  4. python基础学习二 数据结构之list及相关基本操作

    list是py内置的一种数据类型,list就是列表的意思,list就是一种有序的数据集合,可以随时增加和删除list的元素. 生活中,比如我们要列出全班同学的名字,就可以用list来表示 >&g ...

  5. 一、Android四大框架之ContentProvider的学习与运用,实现SQLite的增删改查。

    本文系原创博客,文中不妥烦请指出,如需转载摘要请注明出处! ContentProvider的学习与运用 Alpha Dog 2016-04-13  10:27:06 首先,项目的地址:https:// ...

  6. cocos对lua代码加密

    1.0 cocos luacompile 用法 我用的普通的cocos2d lua,没用quick,quick好像可以对整个资源包括图像和音频都加密,打包成zip.但我没用quick.看了下luaco ...

  7. vs连接Oracle 客户端库时引发 BadImageFormatException

    报错:Oracle 客户端库时引发 BadImageFormatException如果在安装 32 位 Oracle 客户端组件的情况下以 64 位模式? 解决方案:http://www.cnblog ...

  8. <经验杂谈>C#对CA证书加密解密的简单介绍

    最近做项目接触了一些关于用CA证书加密解密的知识,现在分享一下,加密主要分为对称加密和非对称加密以及单项加密这三种,CA是一个权威的第三方认证机构,CA加密有公钥和私钥之分. 以下是C#读取证书文件进 ...

  9. JavaScript(第十六天)【BOM基础】

      学习要点: 1.window对象 2.location对象 3.history对象 BOM也叫浏览器对象模型,它提供了很多对象,用于访问浏览器的功能.BOM缺少规范,每个浏览器提供商又按照自己想法 ...

  10. JavaScript(第十五天)【匿名函数和闭包】

      学习要点: 1.匿名函数 2.闭包 匿名函数就是没有名字的函数,闭包是可访问一个函数作用域里变量的函数.声明:本节内容需要有面向对象和少量设计模式基础,否则无法听懂.(所需基础15章的时候已经声明 ...