How do I 'unselect' a selected file?

问题

I'm using this to allow the user to select and upload a file:

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

This correctly show:

When user clicks 'Upload', I upload the file.

When the user clicks 'Remove', how do I clear out the file name?

回答1:

Simply clear the value of the file input element:

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

Here's a demo

回答2:

It should be more angular way like this with angular.element(element):

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

Plunkr Demo

---

From the docs usage:

angular.element(element);

where angular.element() creates a jQuery object and this (element) in the braces is the HTML string or DOMElement to be wrapped into jQuery.

回答3:

Googling lead me here, so to help others you can also do this using straight 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>

来源：https://stackoverflow.com/questions/25442724/how-do-i-unselect-a-selected-file