当前位置:
首页 > Python基础教程 >
-
C#教程之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 > 0) { for (var i = 0; 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); }
有疑问欢迎交流。
栏目列表
最新更新
nodejs爬虫
Python正则表达式完全指南
爬取豆瓣Top250图书数据
shp 地图文件批量添加字段
爬虫小试牛刀(爬取学校通知公告)
【python基础】函数-初识函数
【python基础】函数-返回值
HTTP请求:requests模块基础使用必知必会
Python初学者友好丨详解参数传递类型
如何有效管理爬虫流量?
SQL SERVER中递归
2个场景实例讲解GaussDB(DWS)基表统计信息估
常用的 SQL Server 关键字及其含义
动手分析SQL Server中的事务中使用的锁
openGauss内核分析:SQL by pass & 经典执行
一招教你如何高效批量导入与更新数据
天天写SQL,这些神奇的特性你知道吗?
openGauss内核分析:执行计划生成
[IM002]Navicat ODBC驱动器管理器 未发现数据
初入Sql Server 之 存储过程的简单使用
这是目前我见过最好的跨域解决方案!
减少回流与重绘
减少回流与重绘
如何使用KrpanoToolJS在浏览器切图
performance.now() 与 Date.now() 对比
一款纯 JS 实现的轻量化图片编辑器
关于开发 VS Code 插件遇到的 workbench.scm.
前端设计模式——观察者模式
前端设计模式——中介者模式
创建型-原型模式