Question

我有一张桌子，上传图片。我还有一张已经显示的图片。我想要做的是当我上传新图片时，它会覆盖已经显示的图片。在我的小提琴我有一张鸭子照片，当我上传新的照片时，它显示为另一张图片。如何在用户上传新图片时隐藏鸭图片？

链接我的小提琴：http://jsfiddle.net/DharkRoses/m2qagzzk/6/

示例代码：

angular.module('test', []);
angular.module('test').controller('UploadCtrl', function ($scope, $timeout) {

$scope.thumbnail = {
    dataUrl: []
};

$scope.fileReaderSupported = window.FileReader != null;
$scope.photoChanged = function (files, index) {
    if (files != null) {
        var file = files[0];
        var index = this.$index;
        if ($scope.fileReaderSupported && file.type.indexOf('image') > -1) {
            $timeout(function () {
                var fileReader = new FileReader();
                fileReader.readAsDataURL(file);
                fileReader.onload = function (e) {
                    $timeout(function () {
                        $scope.thumbnail[index] = {dataUrl: e.target.result};
                    });
                }

Answer 1

使用此代码:: demo

<img ng-if="!thumbnail[$index].dataUrl"ng-src="http://s13.postimg.org/w0v662g93/pink_04.png" height="50px" />

Answer 2

AngularJS视图支持二元运算符

condition && true || false

您可以在条件中使用ng-src：

<img ng-src="{{thumbnail[$index].dataUrl.length !== 0 && thumbnail[$index].dataUrl || 'http://s13.postimg.org/w0v662g93/pink_04.png'}}" height="50px" />

HTML：

<tr ng-repeat="i in [1, 2, 3, 4]">
            <td>{{i}}</td>
            <td>
                <input type="file" name="file" onchange="angular.element(this).scope().photoChanged(this.files)" />                           </td>
            <td>
                <img ng-src="{{thumbnail[$index].dataUrl.length !== 0 && thumbnail[$index].dataUrl || 'http://s13.postimg.org/w0v662g93/pink_04.png'}}" height="50px" />
            </td>
   </tr>

fiddle

如何将图像上传到angularjs，css

2 个答案: