how can I reset file input in IE, I used the following and it worked in chrome and FF but not IE
fileInputElement.value=""
what's the alternative in IE ?
bind('focus', function() { // Clear any files currently selected in #upload-file $('#upload-file'). val(''); }) ; // Choose uploading new one - this works ok $('#upload-file'). bind('focus', function() { // Clear any files currently selected in #select-file $('#select-file').
The <input type="reset"> defines a reset button which resets all form values to its initial values. Tip: Avoid reset buttons in your forms! It is frustrating for users if they click them by mistake.
One way to remove a file from a JavaScript FileList is to use the spread operator to convert the FileList to an array. Then we can call splice to remove the file we want. We add multiple to let select multiple files. We get the file input element with getElementById .
If fileInputElement
is on its own in the form fileInputForm
, you can do:
window.fileInputForm.reset();
Otherwise for IE you'll have to replace the element with a clone:
fileInputElement.parentNode.replaceChild(
fileInputElement.cloneNode(true),
fileInputElement
);
The following code worked for me with jQuery. It works in every browser and allows to preserve events and custom properties.
var $el = $(fileInputElement);
$el.wrap('<form>').closest('form').get(0).reset();
$el.unwrap();
See this jsFiddle for code and demonstration.
Clearing <input type='file' /> using jQuery
How to reset file input with JavaScript
Cross-Browser solution by @Gyrocode.com in vanilla JS:
var clearFileInput = function (input) {
if (!input) {
return;
}
// standard way - works for IE 11+, Chrome, Firefox, webkit Opera
input.value = null;
if (input.files && input.files.length && input.parentNode) {
// workaround for IE 10 and lower, pre-webkit Opera
var form = document.createElement('form');
input.parentNode.insertBefore(form, input);
form.appendChild(input);
form.reset();
form.parentNode.insertBefore(input, form);
input.parentNode.removeChild(form);
}
}
You can't reset the File input by itself. What you can do is wrap your File input in a <form id="form_id">
tag and reset the form. With jQuery you can do $('#form_id')[0].reset();
and in JavaScript you can do document.getElementById('form_id').reset()
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With