用jasny-bootstrap擴展上傳圖像angularjs

Question

是否有人嘗試用jasny-bootstrap擴展來上傳angularjs中的圖像？

我用http://jasny.github.io/bootstrap/javascript/#fileinput

這是代碼

<div class="fileinput fileinput-new" data-provides="fileinput"> 
      <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div> 
      <div> 
       <span class="btn btn-default btn-file"> 
       <span class="fileinput-new">Select image</span> 
       <span class="fileinput-exists">Change</span> 
       <span class="fileinput-upload" ng-click="">Upload</span> 
       <input type="file" name="..."> 
       </span> 
       <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a> 
      </div> 
      </div> 

我要上傳的服務器時，點擊上傳選定的文件。

有些建議嗎？

Answer 1

要使用這個方法，你需要以下模塊：https://github.com/ghostbar/angular-file-model

工作正常

在查看HTML文件：在控制器

var file = new FormData(); 
    var file1 = $scope.compose.myFile; 
    file.append('file',file1); 
    PubServices.save(file, function(data) { 
        ..... 
      }, function(error){ 
      console.log(error); 
      }); 

<div class="fileinput fileinput-new" data-provides="fileinput"> 
       <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div> 
       <div> 
        <span class="btn btn-default btn-file"> 
        <span class="fileinput-new">Select image</span> 
        <span class="fileinput-exists">Change</span> 
        <input type="file" name="file" file-model="compose.myFile"> 
        </span> 
        <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a> 
       </div> 
       </div> 

和服務

angular.module('App') 
    .service('PubServices', function ($resource) { 
    return $resource(
     'http://localhost:8080/appServer/rest/secure/domain', 
     {file:'@file'}, 
     { 
     save: { 
     method: 'POST', 
     params: {file:'@file'}, 
     transformRequest: angular.identity, 
     /* Note the headers property */ 
     headers: {'Content-Type': undefined}, 
     } 
    }); 
})