直接上代碼 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); }
有疑問歡迎交流。