将文件发送到我的asp.net webapi控制器从angularjs

Question

正试图上传图像文件。现在我需要将文件从angularjs发送到我的asp.net web api控制器。我尝试了几个SO问题。 （我不知道哪里会出错）它不会帮助我。任何人都可以帮助我解决它。

HTML

<input type="file" file="file" fil onchange="angular.element(this).scope().photoChanged(this.files)" /> 
       <img ng-src="{{ thumbnail.dataUrl }}"width="150" height="150" /> 

角控制器

//this is to preview the uplaode image  
$scope.thumbnail = { 
      dataUrl: 'adsfas' 
     }; 
     $scope.fileReaderSupported = window.FileReader != null; 
     $scope.photoChanged = function (files) { 
      if (files != null) { 
       var file = files[0]; 
       if ($scope.fileReaderSupported && file.type.indexOf('image') > -1) { 
        $timeout(function() { 
         var fileReader = new FileReader(); 
         fileReader.readAsDataURL(file); 
         fileReader.onload = function (e) { 
          $timeout(function() { 
           $scope.thumbnail.dataUrl = e.target.result; 
          }); 
         } 
        }); 
       } 
      } 
     }; 
//after the button pressed 
     $scope.AddBanner = function() { 


var request = $http({ 
       method: 'POST', 
       url: urls.api + 'Banner/PostBanner', 
       data: data, 
       ContentType: multipart/form-data; 
       processData: false, 
       //data: JSON.stringify(dataObj) 



      }).success(function (data, status) { 
       alert('saved succesfully'); 
      }) 
     .error(function (error) { 
      $scope.status = 'Unable to upload Banner Details : ' + error.message; 
      console.log($scope.status); 
     }); 

     }; 

Answer 1

在我看来，最好用一个指令这一点。例如：https://github.com/danialfarid/ng-file-upload。你会得到进展报告等，并解决跨浏览器兼容性问题。这里不需要再次发明轮子。