在Angular JS中使用進度條進行文件上傳

有沒有人可以幫助我如何在上載文件的同時放置進度條，以指示用戶文件仍在上傳？對不起，我還是這個新手。我讀了很多關於這個，並仍然讓我迷惑它。先謝謝你！在Angular JS中使用進度條進行文件上傳

這裏是我的html，我會提交文件：

 <form class="form-group" ng-submit="addX()"> 
     <div class="col-lg-4"> 
      <input id="file" type="file" name="file" class="file btn btn-default" data-show-preview="false"><br> 
      <input id="submit" class="btn btn-primary" type="submit" name="submit" value="Upload" /><br/><br/> 
     </div> 
    </form>

這裏是我的JS，將我連接到我的Python文件：

$scope.addX = function() { 
     var f = document.getElementById('file').files[0]; console.log(f); 
     var formData = new FormData(); 
     formData.append('file', f); console.log(formData); 
      $http({method: 'POST', url: 'http://x.x.x./', 
          data: formData, 
          headers: {'Content-Type': undefined}, 
          transformRequest: angular.identity}) 
        .success(function(data, status, headers, config) { 
          if (data.success) { 

           console.log('import success!'); 

          } 
         }) 
         .error(function(data, status, headers, config) { 
         }); 
       // } 
      };

來源

2014-09-01 thinkmind

不幸的是這似乎不可能的此時此刻。您可以按照此線程https://github.com/angular/angular.js/issues/1934調用訪問xhr請求，您還需要進行更新。目前您需要自己使用XHR2對象。這樣

var fd = new FormData(); 
fd.append("uploadedFile", file); 

xhr = new XMLHttpRequest(); 

xhr.upload.addEventListener("progress", uploadProgress, false); 

xhr.addEventListener("readystatechange", function (e) { 
// upload completed 
if (this.readyState === 4) { 

// do whats needed 
} 

xhr = null; 
} 
}); 

xhr.addEventListener("error", function (e) { 
callback(e); 
}); 
//xhr.addEventListener("abort", uploadCanceled, false); 
xhr.open("POST", url); 

// send the form data to the server 
xhr.send(fd);

事情的另一種選擇，以解決這將是處理它的服務器端在你有在業務控制情況。

來源

2014-09-01 08:18:52 AirBorne04

在Angular JS中使用進度條進行文件上傳

回答

相關問題