今天發現的問題 在谷歌瀏覽器一直運行良好的功能,在edge瀏覽器不能使用。 代碼參考我的另一篇博客:WebAPI Angularjs 上傳文件 不能運行的原因 下圖紅框中的代碼在edge瀏覽器中無法執行,也就不能執行下麵的上傳文件代碼。 解決方案 既然原因找到了,就可以尋找解決方案了,找了一下午,有 ...
今天發現的問題
在谷歌瀏覽器一直運行良好的功能,在edge瀏覽器不能使用。
代碼參考我的另一篇博客:WebAPI Angularjs 上傳文件
不能運行的原因
下圖紅框中的代碼在edge瀏覽器中無法執行,也就不能執行下麵的上傳文件代碼。
解決方案
既然原因找到了,就可以尋找解決方案了,找了一下午,有一篇有用的文章:angular ng-click程式觸發,方法
我的解決方案(註意加粗加大的代碼【關鍵喲】)
JS代碼如下:
define(['app'], function (app) { 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("上傳失敗"); }); }; }]); }) function coverChange() { $('#uploads').click(); angular.element($('#uploads')).click();// ok };
大家看到這個代碼會不會以為我寫錯了,這個coverChange方法就要寫到define外面,不然頁面中無法調用到這個方法,會提示undefined function。
HTML代碼:
<div id="preview"> <img src="{{csInfo.CS.CoverUrl}}" ng-disabled="uploadimg" id="txtSourceURL" name="txtSourceURL" style="width: 180px; cursor: pointer; height: 70px;" onclick="$('#fileUpload').click()" /> <input id="fileUpload" type="file" accept="image/jpg,image/jpeg,image/png, image/bmp" name="fileUpload" onchange="coverChange()" style="display: none;" /> <button ng-click="save()" id="uploads" style="display: none;">確定上傳</button> <!--必須使用其他控制項(按鈕或者標簽)調用上傳(save())方法--> <input id="inputSourceURL" name="inputSourceURL" type="hidden" ng-model="csInfo.CS.CoverUrl" required /> </div>
<div class="word"> 支持.jpg .png .jpeg 格式<span id="loading" ng-show="uploadimg"><img src="/libs/source/images/loading.gif" alt="">正在上傳,請稍後···</span> </div>
API介面代碼
做了一點小改動,因為edge瀏覽器傳過來的filename是一個帶盤符的路徑(C:\\xxx\\filename.ext)
var file = HttpContext.Current.Request.Files["cover"]; var fileName = file.FileName; var fn = fileName.Split('\\'); if (fn.Length > 1) { fileName = fn[fn.Length - 1]; } var fs = fileName.Split('.'); if (fs.Length > 1) { var ext = fs[fs.Length - 1]; }
就是對文件名單獨處理一下即可,剩下的介面代碼一樣。
這樣改動以後就可以在谷歌和edge瀏覽器下運行了。