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的模 ...
随机推荐
- set的便捷操作
认识集合 由一个或多个确定的元素所构成的整体叫做集合. 集合中的元素有三个特征: 1.确定性(集合中的元素必须是确定的) 2.互异性(集合中的元素互不相同.例如:集合A={1,a},则a不能等于1) ...
- linux服务器 jboss-7安装
jBoss简介 JBoss是一个运行EJB的J2EE应用服务器.它是开放源代码的项目,遵循最新的J2EE规范.从JBoss项目开始至今,它已经从一个EJB容器发展成为一个基于的J2EE的一个web 操 ...
- 从壹开始微服务 [ DDD ] 之九 ║从军事故事中,明白领域命令验证(上)
烽烟 哈喽大家周二好呀,咱们又见面了,上周末掐指一算,距离 圣诞节 只有 5 周的时间了(如果你还不知道为啥我要提圣诞节这个时间点,可以看看我的第二系列开篇<之一 ║ D3模式设计初探 与 我的 ...
- 【转载】Docker+Kubernetes 干货文章精选
主要涉及到以下关键字: K8S.Docker.微服务.安装.教程.网络.日志.存储.安全.工具.CI/CD.分布式.实践.架构等: 以下盘点2018年一些精选优质文章! 漫画形式: 漫画:小黄人学 S ...
- BootStrap:轮播插件
前述 利用 BootStrap 实现图片轮播,包括 基本轮播.带标题的轮播.设置轮播速度的轮播.控制前后的轮播 实例 基本轮播 代码 1.引入bootstrap和jQuery文件 <!-- jQ ...
- IDEA编写css样式报错
粗心大意!浪费了30分钟时间,必须记录一下! 报错图片 琢磨了半天,没想出是哪里错了,很无奈!!!!!!!!! 度娘:ctrl+shift+alt+H,设置成NONE就可以了 试了一下,果然好使,不再 ...
- SQL Server 查找统计信息的采样时间与采样比例
有时候我们会遇到,由于统计信息不准确导致优化器生成了一个错误的执行计划(或者这样表达:一个较差的执行计划),从而引起了系统性能问题.那么如果我们怀疑这个错误的执行计划是由于统计信息不准确引起的.那么我 ...
- Pytorch系列教程-使用字符级RNN生成姓名
前言 本系列教程为pytorch官网文档翻译.本文对应官网地址:https://pytorch.org/tutorials/intermediate/char_rnn_generation_tutor ...
- [Swift-2019力扣杯春季决赛]1. 有序数组中的缺失元素
给出一个有序数组 A,数组中的每个数字都是 独一无二的,找出从数组最左边开始的第 K 个缺失数字. 示例 1: 输入:A = [4,7,9,10], K = 1 输出:5 解释: 第一个缺失数字为 5 ...
- Servlet+JSP及Tomcat常见面试题(面试必备)
1. 什么是servlet? servlet是用来处理客户端请求并产生动态网页内容的java类 2. Tomcat的缺省端口是多少,怎么修改? a) 默认端口号是8080 b) ...