CODEWITHSUNDEEP
javascriptjqueryhtml
Ryan NZ
Ryan NZ

Reputation: 626

Clear/Reset file input on page load?

I need to clear a file upload input field when the page loads. I have looked at 10-15 various ways to do this via stackoverflow, however every suggestion includes a reset button where I want to clear it on page load so that it is reset/cleared if a user clicks the back button on their browser.

I am currently using this code to reset the entire form, it works well for all of the dropdowns however it does not clear the file input field

function init() {
    // Clear forms here
    //reset inputs
$('#upload_form').trigger("reset");
//reset upload form

}

window.onload = init;

From my researh this seems to have the most upvotes from the community Clearing <input type='file' /> using jQuery

Cheers!

Upvotes: 0

Views: 6667

Answers (2)

Miguel
Miguel

Reputation: 20633

One way to reset the file input type field is to replace it with a new one:

function reset() {
    var input = document.querySelector('.file-input');
    var newInput = input.cloneNode(true);
    input.parentNode.replaceChild(newInput, input);
}

Example

http://jsfiddle.net/d25nV/

Upvotes: 2

1ace
1ace

Reputation: 5288

You don't need jQuery for that:

function init() {
  document.getElementById("upload_form").reset();
}

window.onload = init;

Upvotes: 5

Related Questions