Clearing an HTML file upload field via JavaScript
You can't set the input value in most browsers, but what you can do is create a new element, copy the attributes from the old element, and swap the two.
Given a form like:
<form>
<input id="fileInput" name="fileInput" type="file" />
</form>
The straight DOM way:
function clearFileInput(id)
{
var oldInput = document.getElementById(id);
var newInput = document.createElement("input");
newInput.type = "file";
newInput.id = oldInput.id;
newInput.name = oldInput.name;
newInput.className = oldInput.className;
newInput.style.cssText = oldInput.style.cssText;
// TODO: copy any other relevant attributes
oldInput.parentNode.replaceChild(newInput, oldInput);
}
clearFileInput("fileInput");
Simple DOM way. This may not work in older browsers that don't like file inputs:
oldInput.parentNode.replaceChild(oldInput.cloneNode(), oldInput);
The jQuery way:
$("#fileInput").replaceWith($("#fileInput").val('').clone(true));
// .val('') required for FF compatibility as per @nmit026
Resetting the whole form via jQuery: https://stackoverflow.com/a/13351234/1091947
Simply now in 2014 the input element having an id supports the function val('')
.
For the input -
<input type="file" multiple="true" id="File1" name="choose-file" />
This js clears the input element -
$("#File1").val('');