PDA

Click to See Complete Forum and Search --> : reset a input type="file"

flopez
03-24-2004, 01:28 PM
HI,

i need other form to reset a input type="file", different to reset the form.

is it Possible ?

tahnks .
Paul Jr
03-24-2004, 03:03 PM
You can't modify the value of the input whose type is "file." You can clear it, by using the normal "reset" form button.
fredmv
03-25-2004, 03:13 PM
This is a rather interesting problem. If I understood your question correctly, it appears as if you want to reset a file upload form element (i.e., <input type="file" />), however, while not resetting the rest of the form. Why is this an interesting query? Simply because, a file upload form element is read-only thus making this somewhat more difficult. I've come up with basically two solutions to this problem, each have their pros and cons to go along with them — just like with anything else.

My first suggestion would be to use JavaScript to completely remove the element out of the document tree and then recreate and reappend it to the document therefore appearing as if the value of the element was reset (not to say it wasn't, but not done in a typcal manner). In the end, this kind of implementation would probably go something like this:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>untitled</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" />
<script type="text/javascript">
//<![CDATA[
function resetFileInput()
{
var parent = document.getElementById('fileInputContainer'),
newFileInput = document.createElement('input');

parent.removeChild(document.getElementById('file'));

newFileInput.setAttribute('type', 'file');
newFileInput.setAttribute('id', 'file');

parent.appendChild(newFileInput);
}
//]]>
</script>
</head>
<body>
<form action="#">
<div>
<span id="fileInputContainer">
<input type="file" id="file" />
</span>
<input type="button" value="Reset" onclick="resetFileInput();" />
</div>
</form>
</body>
</html>Of course, this may not be a good idea in its current form considering non-JavaScript users will not be able to get any use out of the reset button. You could, however, generate the button via JavaScript and then include a generic reset button while having the button as well as the file upload form element residing in their very own form, which is actually the other solution.

The second solution, while not quite as clever as the first, would be to include both form elements (i.e., the file upload form elements and the reset button) in a form specially created form them. This might be practical if you don't have any other form elements — however, that would render this entire query pointless simply because you generally would considering the circumstances. This solution would obviously be put together something like this:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>untitled</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" />
</head>
<body>
<form action="#">
<div>
<input type="file" />
<input type="reset" />
</div>
</form>
<form action="#">
<div>
<!-- more form elements here -->
</div>
</form>
</body>
</html>