Snippets
DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Benoit has posted 48 posts at DZone. View Full User Profile

Firefox 3 And Input File

07.12.2008
| 18673 views |
  • submit to reddit 
        The nsIDOMFile interface retrieves data from a file submitted to a form using the input type "file". This allows the file reference to be saved when the form is submitted while the user is using a web application offline, so that the data can be retrieved and uploaded once the Internet connection is restored.


<!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" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>input type=file & Firefox 3</title>
</head>

<body>
	
<h1>input type=file & Firefox 3</h1>
	
<script type="text/javascript">
// <![CDATA[

function inputFileOnChange() {
	var v_console = '';
	v_console += 'value: ' + document.getElementById('my-file').value;
	v_console += '<br \/>';
	
	if(document.getElementById('my-file').files) {
		// Support: nsIDOMFile, nsIDOMFileList
		v_console += 'files.length: ' + document.getElementById('my-file').files.length;
		v_console += '<br \/>';
		
		v_console += 'fileName: ' + document.getElementById('my-file').files.item(0).fileName;
		v_console += '<br \/>';
		
		v_console += 'fileSize: ' + document.getElementById('my-file').files.item(0).fileSize;
		v_console += '<br \/>';
		
		v_console += 'data: ' + document.getElementById('my-file').files.item(0).getAsDataURL();
//		v_console += 'data: ' + document.getElementById('my-file').files.item(0).getAsBinary();
//		v_console += 'data: ' + document.getElementById('my-file').files.item(0).getAsText();
		v_console += '<br \/>';
	};
	
	document.getElementById('console').innerHTML = v_console;
};

// ]]>
</script>
	
<div>
	<input type="file" name="my-file" id="my-file" onchange="inputFileOnChange();" />
	<br /><br />
	<code id="console">...console...< /code>
</div>
	
</body>
</html>


<a href="http://www.ab-d.fr/plan-de-site/">Source: </a><a href="http://www.ab-d.fr/date/2008-07-12/">Firefox 3 and input type=file , upload file</a>
"Starting from scratch" is seductive but disease ridden
-Pithy Advice for Programmers