WebAPI Angularjs 上传文件
直接上代码
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 上传文件的更多相关文章
- angularJs上传文件(非form上传)
angular.js:13920 Broken interceptor detected: Config object not supplied in rejection: <input typ ...
- angularJS 在edge浏览器上传文件,无法主动触发ng-click
今天发现的问题 在谷歌浏览器一直运行良好的功能,在edge浏览器不能使用. 代码参考我的另一篇博客:WebAPI Angularjs 上传文件 不能运行的原因 下图红框中的代码在edge浏览器中无法执 ...
- 前端AngularJS后端ASP.NET Web API上传文件
本篇体验使用AngularJS向后端ASP.NET API控制器上传文件. 首先服务端: public class FilesController : ApiController { //usi ...
- [Angularjs]ng-file-upload上传文件
写在前面 最近在弄文档库的H5版,就查找了下相关的上传组件,发现了ng-upload的东东,推荐给大家. 系列文章 [Angularjs]ng-select和ng-options [Angularjs ...
- WebAPI通过multipart/form-data方式同时上传文件以及数据(含HttpClient上传Demo)
简单的Demo,用于了解WebAPI如何同时接收文件及数据,同时提供HttpClient模拟如何同时上传文件和数据的Demo,下面是HttpClient上传的Demo界面 1.HttpClient部分 ...
- Asp.Net Core WebApi 和Asp.Net WebApi上传文件
public class UpLoadController : ControllerBase { private readonly IHostingEnvironment _hostingEnviro ...
- webAPI 上传文件 404错误(转载)
webAPI文件上传时文件过大404错误的问题 来源:https://www.cnblogs.com/dzhengyang/p/9149157.html 背景:最近公司有个需求,外网希望自动保存数据 ...
- 上传文件调用webapi方式
选择文件 <div> <label for="fileUpload"> 选择文件 </label> <br/> <input ...
- Owin WebAPI上传文件
Owin是微软出了几年的东东了,一直没时间学习.大概了解了下,是一个脱离IIS环境,快速搭建WebAPI服务的东西. 刚好想尝试下尽量脱离IIS创建简单快捷配置的项目,就是用了Nginx+Owin的模 ...
随机推荐
- 带着新人看java虚拟机07(多线程篇)
这一篇说一下比较枯燥的东西,为什么说枯燥呢,因为我写这都感觉很无聊,无非就是几个阻塞线程的方法和唤醒线程的方法... 1.线程中断 首先我们说一说怎么使得一个正在运行中的线程进入阻塞状态,这也叫做线程 ...
- .net core 注入机制与Autofac
本来是要先出注入机制再出 管道 的,哈哈哈……就是不按计划来…… 这里扯扯题外话:为什么要注入(DI,dependency-injection),而不用 new 对象? 可能我们都很清楚,new 对象 ...
- WebWorker 简单使用方式
WebWorker 一定程度上可以算得上是浏览器中的多线程技术了,在项目中适当使用 Worker 来做一些耗时的操作能大大提高页面整体流畅度. Worker的使用也是非常简单的,通过向 Worker ...
- Python的垃圾回收机制(引用计数+标记清除+分代回收)
一.写在前面: 我们都知道Python一种面向对象的脚本语言,对象是Python中非常重要的一个概念.在Python中数字是对象,字符串是对象,任何事物都是对象,而它们的核心就是一个结构体--PyOb ...
- 微信小程序之表单验证
表单验证 何为表单验证呢? 百度百科给出的回答是这样的: 表单验证是javascript中的高级选项之一.JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证 [ ...
- Hive使用必知必会系列
一.Hive的几种数据模型 内部表 (Table 将数据保存到Hive 自己的数据仓库目录中:/usr/hive/warehouse) 外部表 (External Table 相对于内部表,数据不在自 ...
- 【4】Asp.Net Core2.2中间件多扩展对应应用
[前言] 上一篇完成了Asp.Net Core 2.2全新的管道处理模型解析,“俄罗斯套娃”式的委托嵌套和传递,组建了扩展性无与伦比的管道模型!与此同时,委托嵌套过于复杂,使用起来并不友好,然后多种扩 ...
- Oracle 中的SELECT 关键字(查询、检索)
1. SELECT 关键字用法: 检索单个列:select 列名 from 表名: 例:select ename from emp;检索多个列: select [列1,列2, ... ,列N] fro ...
- 项目分层-----MVC
MVC设计模式:modle层,view层,controller层 以前学习的servlet其实就是一个java类,或者说经过规范的java类,实际进行跳转时,还是要在web.xml文件中配置才能正常跳 ...
- openlayers4 入门开发系列之地图模态层篇(附源码下载)
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...