如何在angularjs，css中將圖像上傳到現有圖像src

我有一個表格並且有上傳圖片。我也有一張已經顯示的照片。我想要做的是當我上傳一張新照片時，它會覆蓋已經顯示的照片。在我的小提琴中，我有一張鴨子圖片，當我上傳新圖片時，它會顯示爲另一張圖片。如何在用戶上傳新圖片時隱藏鴨圖片？如何在angularjs，css中將圖像上傳到現有圖像src

鏈接在我的小提琴：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}; 
        }); 
       }

來源

2015-11-13 qazzu

http://stackoverflow.com/a/33342251/3030495它會幫助你。 – hurricane

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

來源

2015-11-13 07:35:59 Afsar

兩個答案都是可行的。所以我會接受發佈第一篇文章的人的回答。非常感謝你 – qazzu

不客氣，我也可以得到upvote。 – Afsar

使用此代碼:: demo

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

來源

2015-11-13 07:38:33

是的，它的工作原理。我喜歡提高你的答案，但我的名譽是不夠的。十分感謝 – qazzu

如何在angularjs，css中將圖像上傳到現有圖像src

回答

相關問題