Angularjs back-end asp.net API controller upload file _angularjs

This paper introduces the implementation method of the front-end Angularjs asp.net Web API upload file, the details are as follows

First Service end:

public class Filescontroller:apicontroller {//using System.Web.Http [httppost] public Async Task

UploadDataModel.cs

public class Uploaddatamodel
{public
  string Teststring1{get;set;}
  public string Teststring2{get;set;}

 

Client Main Page:

Index.html

<div ng-include= "' upload.html '" ></div>

Reference:

• Angular-file-upload-shim.js
  
• Angular.js
  
• Angular-file-upload.js
  
• Angular-cookies.js
  
• Angular-resource.js
  
• Angular-sanitize.js
  
• Angular-route.js
  
• App.js
  
• Upload.js
  

upload.html partial view pages are used to accept files.

Upload.html

<div ng-controller= "Uploadctrl"
  <input type= "file" ng-file-select= "Onfileselect ($files)" multiple>
</div>

App.js module dependencies and global configuration.

App.js

' Use strict '

angular.module (' Angularuploadapp ', [
  ' ngcookies ',
  ' Ngresource '
  , ' ngsanitize ', ']
  Ngroute ',
  ' Angularfileupload '
])
. config (function ($routeProvider) {
  $routeProvider
    . When ('/', {
      templateurl: ' upload.html ',
      controller: ' Uploadctrl '
    })
    . Otherwise ({
      Resirectto: '/'
    }
})

The controller provides methods for uploading and canceling uploads.

Upload.js

'use strict';

angular.module('angularUploadApp')
  .controller('UploadCtrl', function($scope, $http, $timeout, $upload){
    $scope.upload = [];
    $scope.fileUploadObj = {testString1: "Test ring 1", testString2: "Test string 2"};
    
    $scope.onFileSelect = function ($files) {
      //$files: an array of files selected, each file has name, size, and type.
      for (var i = 0; i < $files.length; i++) {
        var $file = $files[i];
        (function (index) {
          $scope.upload[index] = $upload.upload({
            url: "./api/files/upload", // webapi url
            method: "POST",
            data: { fileUploadObj: $scope.fileUploadObj },
            file: $file
          }).progress(function (evt) {
            // get upload percentage
            console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
          }).success(function (data, status, headers, config) {
            // file is uploaded successfully
            console.log(data);
          }).error(function (data, status, headers, config) {
            // file failed to upload
            console.log(data);
          });
        })(i);
      }
    }

    $scope.abortUpload = function (index) {
      $scope.upload[index].abort();
    }
  })

Above is the front-end Angularjs back-end asp.net Web API upload file implementation method, I hope to help you learn.