Load file into a javascipt variable
Using the Sarissa library for cross-browser support, you can now let a user pick a file and load its contents into a variable or another div. Here is the example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Test5</title>
<script language="JavaScript" src="sarissa.js" type="text/javascript"></script>
<script language="JavaScript">
var xmlhttp = new XMLHttpRequest();
var fileContents;
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {
document.getElementById("myvalues").innerHTML = xmlhttp.responseText;
fileContents = xmlhttp.responseText;
}
}
function getFile() {
document.getElementById("hiddenFile").value = document.getElementById("myfile").value; //for netscape
var myFile = "file:///" + document.getElementById("hiddenFile").value;
xmlhttp.open('POST', myFile, true);
xmlhttp.send(null);
return false;
}
</script>
</head>
<body>
<form action="#" method="post" enctype="multipart/form-data" onSubmit="getFile(); return false;">
<input type="hidden" name="hiddenFile" id="hiddenFile" value="">
Enter path to file: <input type="file" name="myfile" id="myfile">
<input type="submit" name="go" id="go" value="Go">
</form>
<br />
These are your values:
<div id="myvalues"></div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Test5</title>
<script language="JavaScript" src="sarissa.js" type="text/javascript"></script>
<script language="JavaScript">
var xmlhttp = new XMLHttpRequest();
var fileContents;
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {
document.getElementById("myvalues").innerHTML = xmlhttp.responseText;
fileContents = xmlhttp.responseText;
}
}
function getFile() {
document.getElementById("hiddenFile").value = document.getElementById("myfile").value; //for netscape
var myFile = "file:///" + document.getElementById("hiddenFile").value;
xmlhttp.open('POST', myFile, true);
xmlhttp.send(null);
return false;
}
</script>
</head>
<body>
<form action="#" method="post" enctype="multipart/form-data" onSubmit="getFile(); return false;">
<input type="hidden" name="hiddenFile" id="hiddenFile" value="">
Enter path to file: <input type="file" name="myfile" id="myfile">
<input type="submit" name="go" id="go" value="Go">
</form>
<br />
These are your values:
<div id="myvalues"></div>
</body>
</html>
Fidel Guajardo
October 3,