有人尝试使用jasny-bootstrap扩展名在 angularjs上传图像吗? 我用http://jasny.github.io/bootstrap/javascript/#fileinput 这就是代码 div class="fileinput fileinput-new" data-provides="fileinput" div class="fileinput-previe
我用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}, } }); })