直接上代码

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);
}

有疑问欢迎交流。

最新文章

  1. MYSQL提权总结
  2. Eclipse创建maven项目
  3. 转载:JAVA的静态变量、静态方法、静态类
  4. Access数据导入SQLServer2008R2
  5. laravel 自定义函数 使用
  6. dllimport路径问题
  7. sqlite数据库学习
  8. 二叉查找树(BST)的实现
  9. oracle 中对查询出来的数据进行切割、截取等操作
  10. Heaps(Contest2080 - 湖南多校对抗赛(2015.05.10)(国防科大学校赛决赛-Semilive)+scu1616)
  11. luogu 4377 Talent show 01分数规划+背包dp
  12. windows类书的学习心得
  13. bs4
  14. 6、Spring-Kafka4
  15. [No0000CA]什么是“普瑞马法则”?以及 如何利用“普瑞马法则”,三步克服惰性
  16. 18-10-16 IE 快捷键的组合方式
  17. WP8.1学习系列(第十章)——中心控件Hub设计指南
  18. 9款很酷炫jQuery/HTML5特效应用 有源码哦~
  19. Sublime Text 3 新手上路:必要的安裝、設定與基本使用教學
  20. bzoj 1131 [POI2008]Sta 树形dp 转移根模板题

热门文章

  1. 实验吧 ---- 隐写术之so beautiful so white
  2. Go语言中的面向对象
  3. 通俗易懂,什么是.NET?什么是.NET Framework?什么是.NET Core?
  4. 零基础入门学习javase,应该怎么学?这是我给你的一个建议
  5. 从壹开始 [ Id4 ] 之一║ 授权服务器 IdentityServer4 开篇讲&amp;计划书
  6. happyChat开发系列:使用websocket.io实现双向通信的乐聊大前端开发
  7. H5单张、多张图片保存续篇
  8. Spring Boot 2.X 如何快速集成单元测试?
  9. PowerDesigner制作UMI图
  10. 2018-09-15 Java源码英翻中库以及服务原型