角度如何風格輸入類型文件

我已經看到很多關於風格輸入類型文件的問題，但我無法找到它做的角度。角度如何風格輸入類型文件

那麼如何在一個角度的應用程序裏面輸入一個輸入文件？

這是我的代碼中和HTML頁面：

<input type="file" ngf-select ng-model="vm.attachment" name="file" accept="application/pdf" ngf-max-size="5MB" ngf-model-invalid="errorFile">

我已經與（我的輸入文件hidde後）嘗試：

<md-button id="uploadButton" class="md-raised md-primary"> Choose Files </md-button> 

link (scope, element, attrs) { 
    const input = element.find('#fileInput'); 
    const button = element.find('#uploadButton'); 

    if (input.length && button.length) { 
    button.click((e) => input.click()); 
    } 
}

但它不工作，我的鏈接功能不起作用，因爲我使用控制器，並在頁面內檢索錯誤，如果我把這個功能

來源

2017-03-02 Alessandro Minoccheri

您可以使用'NGF-select'指令上的按鈕，例如，從GitHub的文檔頁面http://jsfiddle.net/檢查例子danialfarid/xxo3sk41/590/ '<按鈕NGF選NG-模型= 「picFile」接受= 「圖像/ *」> 選擇圖片' – Fissio

似乎作品！發表一個答案，我接受它 –

我不能做的唯一事情是當我選擇一個文件我想看到文件的名稱，是否可能？ @Fissio –

你可以在按鈕上使用ngf-select指令 - 檢查他們的github文檔頁面中的例子： https://jsfiddle.net/danialfarid/xxo3sk41/590

的ng-model文件具有name屬性，你可以用它來顯示文件名：

<button ngf-select ng-model="picFile" accept="image/*"> Select Picture</button> 
File name: {{picFile.name}}

來源

2017-03-03 08:45:21 Fissio

感謝您的回答！它工作正常！ –

這是不常見的樣式輸入文件。我更喜歡隱藏它，設置一個自定義組件並將其事件指向輸入文件。所以，我可以按照我們的想法設計這個組件。

輸入文件隱藏

使其與顯示隱藏：無

<input type="file" id="input-file" name="file" style="display: none">

我的自定義組件

添加一個onclick事件，所以請點擊此處將指向到我們的輸入文件。

<md-button onclick="document.querySelector('#input-file').click()" class="md-raised md-primary"> Choose Files </md-button>

就是這樣，直到這裏的工作就完成了。但是，如果我們還想要捕獲文檔的名稱，請將onchange事件添加到輸入文件。

<input type="file" onchange="angular.element(this).scope().onchange(this)" id="input-file" name="file" style="display: none"> 
<span>{{theFile.name}}</span>

$scope.onchange = function (sender) { 
    $scope.$apply(function($scope) { 
    $scope.theFile = sender.files[0]; 
    }); 
}

來源

2017-10-17 20:20:31

角度如何風格輸入類型文件

回答

相關問題