如何採用了棱角分明的js

此代碼，以顯示事業部影像工作正常要在img標籤如何採用了棱角分明的js

$scope.isImage = function(ext) { 
    if(ext) { 
    return ext == "jpg" || ext == "jpeg"|| ext == "gif" || ext=="png" 
    } 
}

這裏的工作演示顯示圖像http://plnkr.co/edit/rAZVSFRURCkgxQrZAtvO?p=preview

我想在顯示圖片

<div style="background-image:url(How can i get browsed image file)"></div>

來源

2016-02-13 Shri Suresh

您需要創建在DOM路徑字符串來表示您瀏覽的文件，然後將其添加爲背景圖片網址。我通過修改你的代碼來完成它的工作。

<body> 
    <form action="" id="contactproForm" method="post" ng-app="myApp" ng-controller="myCtrl" enctype="multipart/form-data"> 

     <label for="file">Attachment</label> 
     <div class="input-box"> 
      <input type="file" id="file" class="input-text" ngf-change="onChange(picFile)" ngf-select ng-model="picFile" name="attachement" accept="image/png, image/jpeg, image/jpg, application/msword, application/vnd.ms-excel, application/pdf " /> 
     </div> 
     <div id="image"class="image" style="width:200px;height:200px;background-image:url('');"></div>  <!-- div with id="image"--> 

    </form> 


    <script> 
    var app = angular.module('myApp', ['ngFileUpload']); 

    app.controller('myCtrl', ['$scope', '$http', '$timeout', '$compile', 'Upload', 
     function($scope, $http, $timeout, $compile, Upload) { 
      $scope.onChange = function(files) { 
       if (files[0] == undefined) return; 
       if($scope.isImage(files[0].name.split(".").pop())){ // checking if image 
        var path = URL.createObjectURL(files[0]);  // creating a path for file 
        document.getElementById('image').style.backgroundImage = "url(" + path + ")"; // setting it as background image of div 
       }else{ 
        alert("not Image"); 
       } 
      } 

      $scope.isImage = function(ext) { 
       if (ext) { 
        return ext == "jpg" || ext == "jpeg" || ext == "gif" || ext == "png" 
       } 
      } 
     } 
    ]); 
    </script> 

</body>

我已添加對所作更改的評論。

來源

2016-02-13 08:37:39 Nijeesh

這可以通過將代碼封裝到自定義指令中進行改進 –

另外，由於OP正在使用ng-file-upload，您可以使用ngf-background指令嗎？ https://github.com/danialfarid/ng-file-upload –

有一個問題@nijeesh。 background-image不適用於pdf等。 –

使用ng樣式代替這樣的樣式並替換i法師網址。

納克風格=「{‘背景圖片’：‘URL（https://www.google.com/images/srpr/logo4w.png）’}」>

來源

2016-02-13 06:55:15

這對存儲在用戶本地機器上的圖像不起作用。你需要打開這個文件，讀取它的數據並像@Nijeesh的回答一樣創建一個數據URL。 –

如何採用了棱角分明的js

回答

相關問題