当前位置 : 主页 > 网页制作 > Bootstarp >

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

来源:互联网 收集:自由互联 发布时间:2021-06-12
有人尝试使用jasny-bootstrap扩展名在 angularjs上传图像吗? 我用http://jasny.github.io/bootstrap/javascript/#fileinput 这就是代码 div class="fileinput fileinput-new" data-provides="fileinput" div class="fileinput-previe
有人尝试使用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>

单击上载时,我想上传服务器上选择的文件.

一些忠告?

要使用此方法,您需要以下模块: 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},
      } 
  });
})
网友评论