Как загрузить файл с помощью xmlHTTPRequest в угловых js?

Question

Я хочу загрузить файл в угловом формате. Я попытался следующие:

<div > 
<form enctype="multipart/form-data" method="post" novalidate name="form">   
        <input type="file" onchange="angular.element(this).scope().setFile(this)" required>     
        {{files.name}}     
    <div > 
     <button type="button" ng-class="{'tbt-btn':true, 'primary-btn':true}" ng-click="uploadFile(form,files)">Save</button>   
    </div> 
</form> 
</div> 

JS ---

$scope.uploadFile = function (form,files) { 
    if (form.$invalid) return; 
    var path = files;   

    var uploadProgress = function (e) { 
     if (e.lengthComputable) { 
      var percent = Math.round(e.loaded * 100/e.total); 
      console.log('upload progress: ' + percent + '%'); 
     } 
     }, 
     uploadComplete = function (e) { 
     if (e.target.status !== 200) { 
      uploadError(e); 
      return; 
     } 
     var locations = JSON.parse(e.target.responseText); 
     //function I want to call 
     }, 
     uploadError = function (e) { 

     }, 
     uploadAbort = function (e) { 

     }; 

    var fd = new FormData(); 
    var files = files; 
    for (var i = 0; i < files.length; i++) { 
     fd.append("file", files[i]); 
    } 

    var xhr = new XMLHttpRequest(); 
    xhr.upload.addEventListener("progress", uploadProgress, false); 
    xhr.addEventListener("load", uploadComplete, false); 
    xhr.addEventListener("error", uploadError, false); 
    xhr.addEventListener("abort", uploadAbort, false);   
    xhr.open("POST", "/fileupload");   
    xhr.send(fd); 

}

но не работает .Я получаю ошибку - "Пропавший начальный мульти пограничной части" Кроме того, я не знаю, какие параметры мне нужно передать в xhr.open() ;. Не могли бы вы помочь мне в этом?

Благодаря

Answer 1

Вы можете использовать этот простой контроль, чтобы загрузить файл:

HTML:

<input type="file" data-ng-model="fileName" class="form-control" onchange="angular.element(this).scope().uploadFile(this.files)" 
            name="file"> 

CONTROLLER:

$scope.uploadFile = function (files) { 
       var fd = new FormData(); 
       fd.append("file", files[0]); 
       "your api with (fd)".then(function (response) { 
        if (files && files[0]) { 
         var reader = new FileReader(); 
         reader.onload = function (e:any) { 
          $('#blah').attr('src', e.target.result).width(190).height(200); 
         }; 
         reader.readAsDataURL(files[0]); 
        } 
        $scope.imageName = response; 

       }) 
      };