angularJS 在edge瀏覽器上傳文件，沒法主動觸發ng-click WebAPI Angularjs 上傳文件

今天發現的問題

在谷歌瀏覽器一直運行良好的功能，在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瀏覽器下運行了。