How do I get the contents of a file form a HTML form? Here is an example of what I'm working with. All it does it output something like "C:\Fake Path\nameoffile
<html>
<head>
<script type="text/javascript">
function doSomething(){
var fileContents = document.getElementById('idexample').value;
document.getElementById('outputDiv').innerHTML = fileContents;
}
</script>
</head>
<body >
<form name = "form_input" enctype="multipart/form-data">
<input type="file" name="whocares" id="idexample" />
<button type="button" onclick="doSomething()">Enter</button>
</form>
<div id="outputDiv"></div>
</body>
</html>
EDIT: It seems the solution is difficult to implement this way. What I'm trying to accomplish is sending a file to a python script on my webserver. This is my first time trying this sort of thing so suggestions are welcome. I supposes I could put the python script in my cgi folder and pass the values to it using something like...
/cgi/pythonscript.py?FILE_OBJECT=fileobjecthere&OTHER_VARIABLES=whatever
Would this be a better solution for sending file content to a webserver rather than having javacript open it directly using FileReader?
How do I get the contents of a file form a HTML form? Here is an example of what I'm working with. All it does it output something like "C:\Fake Path\nameoffile
<html>
<head>
<script type="text/javascript">
function doSomething(){
var fileContents = document.getElementById('idexample').value;
document.getElementById('outputDiv').innerHTML = fileContents;
}
</script>
</head>
<body >
<form name = "form_input" enctype="multipart/form-data">
<input type="file" name="whocares" id="idexample" />
<button type="button" onclick="doSomething()">Enter</button>
</form>
<div id="outputDiv"></div>
</body>
</html>
EDIT: It seems the solution is difficult to implement this way. What I'm trying to accomplish is sending a file to a python script on my webserver. This is my first time trying this sort of thing so suggestions are welcome. I supposes I could put the python script in my cgi folder and pass the values to it using something like...
/cgi/pythonscript.py?FILE_OBJECT=fileobjecthere&OTHER_VARIABLES=whatever
Would this be a better solution for sending file content to a webserver rather than having javacript open it directly using FileReader?
Share Improve this question edited Dec 27, 2011 at 14:45 b10hazard asked Dec 27, 2011 at 13:52 b10hazardb10hazard 7,80911 gold badges43 silver badges57 bronze badges 2- You may be able to do that with the HTML5 File Api (on browsers that support it). – bfavaretto Commented Dec 27, 2011 at 13:57
- Ah, I wish I'd googled this a little before I posted. Apparently this is not possible with javascript. It seems it can be done in IE using ActiveX (or so I've read). Looks like I'll need another solution. – b10hazard Commented Dec 27, 2011 at 14:06
3 Answers
Reset to default 14You can actually do that with the new FileReader Object.
Try this working example
function doSomething()
{
var file = document.getElementById('idexample');
if(file.files.length)
{
var reader = new FileReader();
reader.onload = function(e)
{
document.getElementById('outputDiv').innerHTML = e.target.result;
};
reader.readAsBinaryString(file.files[0]);
}
}
(works with the newest versions of Chrome and Firefox)
yes. Replace line of input as given below, Then it will work :)
<input type="file" ACCEPT="text/html" name="whocares" id="idexample" />
You cannot get the contents of a file in a form without submitting the form to your server.