angularjs - 選択したファイルを「選択解除」するにはどうすればよいですか?

Question

これを使用して、ユーザーがファイルを選択してアップロードできるようにしています。

<input id="fileInput" type="file" ng-file-select="onFileSelect($files)">

これは正しく表示されます:

ユーザーが「アップロード」をクリックすると、ファイルをアップロードします。

ユーザーが [削除] をクリックしたときに、ファイル名を消去するにはどうすればよいですか?

Answer 1

file 入力要素の値を単純にクリアします。

document.getElementById('remove').addEventListener('click', function () {
    document.getElementById('fileInput').value = ''
});

ここにデモがあります

Answer 2

次のように、より角度のある方法にする必要がありますangular.element(element)。

angular.element(document.getElementById('remove')).on('click', function(){
    angular.element(document.getElementById('fileInput')).val('');
});

プランカーのデモ

---

ドキュメントの使用法から：

angular.element(element);

ここでangular.element()、jQuery オブジェクトを作成し(element)ます。中括弧内は、jQuery にラップされる HTML 文字列または DOMElementです。

Answer 3

グーグルが私をここに導いてくれるので、他の人を助けるために、直接jQueryを使ってこれを行うこともできます:

$("#clear").on("click", function() {
  $("#fileInput").val("");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="fileInput" />
<button id="clear">Clear</button>