WebAPI Angularjs 上传文件
程序员文章站
2022-04-06 19:53:02
直接上代码 HTML页面代码: controller.js代码 webapi代码: 有疑问欢迎交流。 ......
直接上代码
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); }
有疑问欢迎交流。
上一篇: 无聊老头
下一篇: 等我有钱了,包辆公交车