直接上代码

HTML页面代码:

<label>资源URL</label>
<input type="text" class="form-control" id="txtSourceURL" name="txtSourceURL"
          ng-model="editdata.SourceURL" placeholder="资源URL" ng-maxlength="500">
<!--文件地址展示-->
  
<button id="chooseFile" onclick="$('#fileUpload').click()">选择文件上传</button>
<!--加这个控件是实现选择文件上传文件功能,减少页面上控件的数量,方便样式的调整-->

<input id="fileUpload" type="file" onchange="$('#uploads').click()" style="display: none;" />
<!--浏览器自带的上传文件控件,我也想过change事件直接调用save()方法,但是好像不管用,我只好通过这种中转调用了,大家有知道的告诉我-->
<button ng-click="save()" id="uploads" style="display: none;">确定上传</button>
<!--必须使用其他控件(按钮或者标签)调用上传(save())方法-->

controller.js代码

    app.controller('editController', ['$scope', "$http", 'webConfig', function ($scope, $http, webConfig) {
$scope.save = function () {
var fd = new FormData();
var file = document.querySelector('input[type=file]').files[0];
fd.append('logo', file); //angular 上传的文件必须使用特殊的格式处理,不是json格式
$http({
method: 'POST',
url: webConfig.apiRoot + "/api/ECategoryDetail/PostFiles", //"https://localhost:44320//api/ECategoryDetail/PostFiles"
data: fd,
headers: { 'Content-Type': undefined }, // 写成是undifined,浏览器才自动转化为 文件上传的类型
transformRequest: angular.identity
}).success(function (response) {
//上传成功的操作
if (response.mark) //接口返回的数据标志位,是否保存成功,保存成功则把文件相对地址更新到实体中
$scope.editdata.SourceURL = response.result;
else
alert("上传失败");
});
};
}]);

webapi代码:

        /// <summary>
/// 上传文件
/// </summary>
[HttpPost, Route("api/ECategoryDetail/PostFiles")]
public IHttpActionResult PostFiles()
{
var result = "";
var filelist = HttpContext.Current.Request.Files;
var mark = true;
if (filelist.Count > )
{
for (var i = ; i < filelist.Count; i++)
{
var file = filelist[i];
var fileName = file.FileName;
var virtualPath = "/UploadFile/Files/";
var path = HttpContext.Current.Server.MapPath(virtualPath);//文件全路径
if (!Directory.Exists(path))
{
Directory.CreateDirectory(path);
}
var filePath = $"{path }{fileName}";
try
{
file.SaveAs(filePath);
result = $@"{virtualPath}{fileName}";
}
catch (Exception ex)
{
result = "上传文件写入失败:" + ex.Message;
mark = false;
}
}
}
else
{
result = "上传的文件信息不存在!";
mark = false;
} var json = new { result, mark };
return Ok(json);
}

有疑问欢迎交流。

WebAPI Angularjs 上传文件的更多相关文章

  1. angularJs上传文件(非form上传)

    angular.js:13920 Broken interceptor detected: Config object not supplied in rejection: <input typ ...

  2. angularJS 在edge浏览器上传文件,无法主动触发ng-click

    今天发现的问题 在谷歌浏览器一直运行良好的功能,在edge浏览器不能使用. 代码参考我的另一篇博客:WebAPI Angularjs 上传文件 不能运行的原因 下图红框中的代码在edge浏览器中无法执 ...

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

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

  4. [Angularjs]ng-file-upload上传文件

    写在前面 最近在弄文档库的H5版,就查找了下相关的上传组件,发现了ng-upload的东东,推荐给大家. 系列文章 [Angularjs]ng-select和ng-options [Angularjs ...

  5. WebAPI通过multipart/form-data方式同时上传文件以及数据(含HttpClient上传Demo)

    简单的Demo,用于了解WebAPI如何同时接收文件及数据,同时提供HttpClient模拟如何同时上传文件和数据的Demo,下面是HttpClient上传的Demo界面 1.HttpClient部分 ...

  6. Asp.Net Core WebApi 和Asp.Net WebApi上传文件

    public class UpLoadController : ControllerBase { private readonly IHostingEnvironment _hostingEnviro ...

  7. webAPI 上传文件 404错误(转载)

    webAPI文件上传时文件过大404错误的问题  来源:https://www.cnblogs.com/dzhengyang/p/9149157.html 背景:最近公司有个需求,外网希望自动保存数据 ...

  8. 上传文件调用webapi方式

    选择文件 <div> <label for="fileUpload"> 选择文件 </label> <br/> <input ...

  9. Owin WebAPI上传文件

    Owin是微软出了几年的东东了,一直没时间学习.大概了解了下,是一个脱离IIS环境,快速搭建WebAPI服务的东西. 刚好想尝试下尽量脱离IIS创建简单快捷配置的项目,就是用了Nginx+Owin的模 ...

随机推荐

  1. Python+Appium 获取 toast 文本值方法的封装

    获取toast内容方法封装如下: def get_Toast(self,message): #查找toast值 ''' method explain:查找toast的值,与find_Toast实现方法 ...

  2. Mysql存储过程 —— SEQUENCE的实现

    http://blog.csdn.net/crazylaa/article/details/5368447 创建sql语句: DROP TABLE IF EXISTS sequence; -- 建se ...

  3. Drrols规则引擎

    1.什么是规则引擎? 规则引擎是一种嵌套在应用程序中的组件,它实现了将业务规则从应用程序代码中分离出来.规则引擎使用特定的语法编写业务规则,规则引擎可以接受数据输入.解释业务规则.并根据业务规则做出相 ...

  4. 机器学习中的范数规则化-L0,L1和L2范式(转载)

    机器学习中的范数规则化之(一)L0.L1与L2范数 zouxy09@qq.com http://blog.csdn.net/zouxy09 今天我们聊聊机器学习中出现的非常频繁的问题:过拟合与规则化. ...

  5. Mybatis:缓存,动态SQL,注解SQL以及动态标签使用

    1 转义字符 字符 转义 描述 < < 小于 <= <= 小于等于 > > 大于 >= >= 大于等于 <> <> 不等于 &a ...

  6. Python创建微信机器人

    微信,一个日活10亿的超级app,不仅在国内社交独领风骚,在国外社交也同样占有一席之地,今天我们要将便是如何用Python来生成一个微信机器人,突然想起鲁迅先生曾经说过的一句话:因为是微信机器人系列的 ...

  7. 基于Raft深度优化,腾讯云金融级消息队列CMQ高可靠算法详解

    背景介绍 分布式系统是指一组独立的计算机,通过网络协同工作的系统,客户端看来就如同单台机器在工作.随着互联网时代数据规模的爆发式增长,传统的单机系统在性能和可用性上已经无法胜任,分布式系统具有扩展性强 ...

  8. 『性能』ServiceStack.Redis 和 StackExchange.Redis 性能比较

    背景 近来,需要用到 Redis 这类缓存技术 —— MongoDB 和 Redis 没有进行过比较. 我也懒得在这些细节上 纠结那么多 —— 按照网友给出的文章,听从网友建议,选择 Redis. R ...

  9. 手写DotNet Core 认证授权代码

    在普通的MVC项目中 我们普遍的使用Cookie来作为认证授权方式,使用简单.登录成功后将用户信息写入Cookie:但当我们做WebApi的时候显然Cookie这种方式就有点不适用了. 在dotnet ...

  10. vue安装jquery和配置(不需要在页面引入直接可以使用)

    首先在命令行工具上输入 npm install jquery --save-dev 安装完成之后在build文件夹下的webpack.base.conf.js进行配置,在顶部添加:const webp ...