在angularjs mvc文件上傳

Question

請參閱以下代碼，讓我知道如何上傳我的項目文件夾中的文件.. 我可以在哪裏寫URL？我選擇了這個文件，只是點擊更新按鈕就不能保存。

由於提前 利雅

var DocTrack = angular.module('DocTrack', []); 
 

 
DocTrack.controller('DocumentController', DocumentController); 
 

 
DocTrack.directive('fileModel', ['$parse', function ($parse) { 
 
    return { 
 
     
 
     restrict: 'A', 
 
     link: function (scope, element, attrs) { 
 
      var model = $parse(attrs.fileModel); 
 
      var modelSetter = model.assign; 
 

 
      element.bind('change', function() { 
 
       scope.$apply(function() { 
 
        modelSetter(scope, element[0].files[0]); 
 
       }); 
 
      }); 
 
     } 
 
    }; 
 
}]); 
 

 
DocTrack.service('fileUpload', ['$http', function ($http) { 
 
    debugger; 
 
    this.uploadFileToUrl = function (file, uploadUrl) { 
 
     var fd = new FormData(); 
 
     fd.append('file', file); 
 
     $http.post(uploadUrl, fd, { 
 
      transformRequest: angular.identity, 
 
      headers: { 'Content-Type': undefined } 
 
     }) 
 
     .success(function() { 
 
      alert('File Uploaded Successfully...'); 
 
     }) 
 
     .error(function() { 
 
      alert('File has not been uploaded'); 
 
     }); 
 
    } 
 
}]); 
 

 
DocTrack.controller('DocumentController', ['$scope', 'fileUpload', function ($scope, fileUpload) { 
 

 
    $scope.uploadFile = function() { 
 
     debugger; 
 
     var file = $scope.myFile; 
 
     console.log('file is ' + JSON.stringify(file)); 
 
    
 
     var uploadUrl = "http://localhost:40966/fileUpload"; 
 
     fileUpload.uploadFileToUrl(file, uploadUrl); 
 
    }; 
 
}]);

 <div ng-controller = "DocumentController"> 
 
      <input type="file" file-model="myFile" />   
 
      <button ng-click="uploadFile()" data-url="">upload me</button>    
 
     </div>

Answer 1

var uploadUrl = "http://localhost:40966/fileUpload"; 

你可以檢查你的後端網址會在您指定它必須是相同的，並保存圖像時，您必須指定路徑來存儲圖像在後端。

Answer 2

以HTML形式

<div class="form-group col-xs-12 "> 
    <label class="form-group">Select file</label> 
    <div class="controls"> 
    <input type="file" file-model="fileUrl"/> 
    </div> 
</div> 

在Controller.js

你把下面的代碼

var file = $scope.fileUrl; 
    var uploadUrl = "/Uploadfile"; 
    var data = fileUpload.uploadFileToUrl(file, uploadUrl,formdata); 
}; 

在服務

.service('fileUpload', ['$http', function ($http) { 
    this.uploadFileToUrl = function(file, uploadUrl,formdata){ 
     var fd = new FormData(); 
     fd.append('file', file); 
     fd.append('formdata',angular.toJson(formdata)); 
     $http.post(uploadUrl, fd, { 
      transformRequest: angular.identity, 
      headers: {'Content-Type': undefined} 
     }) 
     .success(function(data){ 
      console.log(data); 
      return data; 
     }) 
     .error(function(){ 
     }); 
    } 
}]); 

.directive('fileModel', ['$parse', function ($parse) { 
    return { 
     restrict: 'A', 
     link: function(scope, element, attrs) { 
      var model = $parse(attrs.fileModel); 
      var modelSetter = model.assign; 

      element.bind('change', function(){ 
       scope.$apply(function(){ 
        modelSetter(scope, element[0].files[0]); 
       }); 
      }); 
     } 
    }; 
}]) 

「/ Uploadfile」是你的後端網址