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. AngularJS - 常用方法汇总

    1. 数组元素的常用方法: http://www.cnblogs.com/diaosizhang/p/3729078.html 2. js的强大的splice方法  http://www.jb51.n ...

  2. Java中instanceof关键字的用法

    Java 中的instanceof 运算符是用来在运行时指出对象是否是特定类的一个实例.instanceof通过返回一个布尔值来指出,这个对象是否是这个特定类或者是它的子类的一个实例. instanc ...

  3. Matlab绘图基础——绘制向量图,二维三维(绘制参数曲线图)

    ------------------------------------------- %绘制向量场图 %例一 clear all;clc; [X,Y] = meshgrid(-2:.2:2,-3:. ...

  4. oracle 分析函数中 keep关键字的使用

    语法 min | max(column1) keep (dense_rank first | last order by column2) over (partion by column3); 另外f ...

  5. Oracle修改字段类型方法小技巧

    有一个表名为tb,字段段名为name,数据类型nchar(20). 1.假设字段数据为空,则不管改为什么字段类型,可以直接执行:alter table tb modify (name nvarchar ...

  6. 使用.NET开发AutoCAD——C#/AutoCAD 2018/ObjectArx/二次开发入门(二)

    1.开发环境配置: (1)安装AutoCAD2018: (2)安装VS2015: (3)安装ObjectARX 2018类库: (4)安装ObjectARX 2018 .NET开发向导(ObjectA ...

  7. 4c语言的第0次作业

    1.你认为大学的学习生活.同学关系.师生关系应该是怎样? 我认为大学的学习生活应该是充实有意义的,有对学习的激情又有与伙伴相知的愉悦. 我认为同学关系应该是互相尊重,互相学习,坦诚相待. 我认为师生关 ...

  8. bug终结者 团队作业第三周

    bug终结者 团队作业第三周 团队展示 队名 bug终结者 队员风采: 杨京典 20162302 风格:先构建框架,在一 一实现,在实现的过程中不断测试和修改. 擅长的技术:拆分问题,使用相对简单的思 ...

  9. TensorFlow问题“The TensorFlow library wasn't compiled to use SSE instructions, but these are available on your machine and could speed up CPU computations.”

    出现的问题: 在使用TensorFlow跑官方教程例子时报以下warning: 虽程序能正常跑出结果,但作为一名强迫症患者对此很是不爽,于是查找资料找到隐藏该warning的解决办法. 解决办法: 在 ...

  10. Linux学习--线程概念

    线程 我们知道 ,进程在各自独立的地址空间中运行,进程之间共享数据需要用mmap或者进程间通信机制,本节我们学习如何在一个进程的地址空间中执行多个线程.有些情况需要在一个进程中同时执行多个控制流程,这 ...