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

发布时间：2020-12-17 21:29:53 所属栏目：安全来源：网络整理

导读：有人尝试使用jasny-bootstrap扩展名在 angularjs上传图像吗？我用http://jasny.github.io/bootstrap/javascript/#fileinput 这就是代码 div class="fileinput fileinput-new" data-provides="fileinput" div class="fileinput-preview thumbnail" data-trig

有人尝试使用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},} 
  });
})

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!