使用MVC在AngularJs中上传文件

时间:2017-02-01 09:20:04

标签: angularjs file-upload asp.net-mvc-5

我目前已经开始使用AngularJs,我的要求是输入代码,通过AngularJs将文件发布到MVC控制器。以下是代码段。

在我的视图中我有

 <input name="myFile" id="myFile" multiple type="file" ng-model="myFile" 
  upload-files/>

这是我的模特,

    public class EmployeeDto
    {
        [Key]
        public int Id { get; set; }
        public string Name { get; set; }
        [ForeignKey("Department")]
        public Nullable<int> DeptId { get; set; }
        public List<int> PrivilegeId { get; set; }

        public Department Department { get; set; }
        public ICollection<EmployeePrivileges> EmployeePrivileges { get; set; }
        public DateTime DateOfJoining { get; set; }
        public byte[] EmpPhoto { get; set; }
        public HttpPostedFileBase[] File { get; set; }
        public bool IsActive { get; set; }
    }

您可以看到属性HttpPostedFileBase []文件。我想通过JSON将Uploaded文件分配给这个属性,是否可能?

在我的Controller.js

 var app = angular.module("EmpApp", []);

   //Directive for Upload Files
   app.directive('uploadFiles', function () {
   return {
     scope: true,        //create a new scope  
     link: function (scope, el, attrs) {
        el.bind('change', function (event) {
            var files = event.target.files;

           //iterate files since 'multiple' may be specified on the element  
            for (var i = 0; i < files.length; i++) {
                //emit event upward  

                scope.$emit("selectedFile", { file: files[i] });
             }

         });
      }
   };
 });

  app.controller("EmpCtlr", function ($scope, EmpService) {
    $scope.AddEmployee = function () {
    //  $scope.files = [];

    if ($scope.Action == "Save") {
        var employee = {
            Id: $scope.Id,
            Name: $scope.EmpName,
            DateOfJoining: $scope.DOJ,
            DeptId: $scope.selectedDept,
            PrivilegeId: $scope.selectedPriv,
            IsActive: 1            
       };


        var addEmployee = EmpService.AddEmployeeSvc(employee);
        addEmployee.then(function (msg) {
            GetEmployees();
        }, function () {
            alert('Error in getting book records');
        });
      }
    };
  });

我的服务.js。

this.AddEmployeeSvc = function (employee) {
            return $http({
             method: 'POST',
             params:employee,
             url: "Employee/AddEmployee",
             headers: { 'Content-Type': undefined },
             transformRequest: function () {
            var formData = new FormData();
            formData.append("myFile", Files);
            return formData;
          },
        })          
       };  

我的MVC控制器方法

      [HttpPost]
     public void AddEmployee(EmployeeDto employee)
    {
      //I will have to say  Request.Form for all input elements but how to 
      // get in employee object


         //var _data = Request.Form["properties"];

         //This is working
        var photo =HttpContext.Request.Files.Count

        }

     }

0 个答案:

没有答案