ユーザーが jpg/mp4 ファイルをアップロードできるフォームがあります。デフォルトでは、アップロードされたファイル名が [アップロード] ボタンの横に表示されます。
「参照/アップロード」ボタンの横にアップロードされたファイル名がブラウザに表示されないようにしています (これは非常にばかげていますが、変更する必要があるという要求です)。
<input id="file-upload" type="file" ngf-select="onFileSelect($files)" accept="image/*">
したがって、「soccer.mp4」という名前のファイルをアップロードする場合-アップロードボタンの横に「soccer.mp4」という単語を表示したくない-これを非表示/削除する簡単な方法はありますか?
DOM ノードがないため不可能です。CSS や JavaScript で変更することはできませんが、簡単なディレクティブで作成されたボタンに置き換えることができます (このデモ フィドルで作成したように) 。
<div ng-controller="MyCtrl">
<input type="file" name="myFile" id="myUpload" accept="/image" styled-upload-button />
</div>
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function ($scope) {
$scope.name = 'Superhero';
}).directive('styledUploadButton', function ($compile ) {
return {
link: function(scope, element, attrs) {
var el = $compile( '<button onclick="document.getElementById(\''+ attrs.id +'\').click()">Upload</button>' )( scope );
element.parent().append(el);
element.css('display', 'none');
}
};
});
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加