我在模态中使用 AngularJS 中jasny-boostrap 的文件输入,所以我也使用了jasny-bootstrap-angular。我有两个疑问:
当我单击按钮打开模型时,我可以选择我想要的文件。如果我选择一个文件并关闭模型,当我再次打开模型时,该文件将处于数据预览中,它不会被清理。当我单击按钮打开模式时,我想在我的 angularjs 中传递空值(或重置)此图像预览(文件输入预览缩略图);
如果单击调用模态的按钮,我想自动将图像从我的 Web 服务获取到数据预览,并自动将按钮更改为“删除”和“更改”,然后我得到一张图片来服务。
我的 HTML:
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-preview thumbnail" style="width: 200px; height: 150px;"></div>
<div>
<span class="btn btn-primary btn-file">
<span class="fileinput-new">Select a image</span>
<span class="fileinput-exists">Change</span>
<input type="file" name="file" file-model="fileinput"> <!--compose.myFile-->
</span>
<a href="#" class="btn btn-primary fileinput-exists" data-dismiss="fileinput">Remover</a>
<button class="btn btn-info" ng-click="showInput()">Show Input</button>
</div>
</div>
如果我单击“显示输入”,我可以看到图像二进制文件,我使用了这个 angularjs:
$scope.showInput = function () {
console.log($scope.fileinput.result);
}
我正在使用这个 HTML 代码和我的 angularjs 来查看来自 Web 服务的图像,并且一切正常:
<!-- Foto view-->
<div class="form-group">
<img ng-show="equipamento.FotoEquipamento != null" style="height:auto; width:225px;" data-ng-src="{{getImage(equipamento.FotoEquipamento)}}" />
</div>