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文件中：

    <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>

在控制器中

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

服务

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},
      } 
  });
})

使用jasny-bootstrap扩展名angularjs上传图像

1 个答案: