I have been trying to use FileReader to read out "/proc/cpuinfo" and print it on the webpage, but it gives nothing. I have tried both "readAsText()" and "readAsDataURL()" methods, which can read the files under a normal file system like ext3.
Can anyone share some insight on why it is like this? security reasons?
If I really want to read files under /proc in JavaScript, what should I do?
The following is my current code.
<html>
<head>
<script>
function readFile() {
var reader = new FileReader();
reader.onload = function(){
var show = document.getElementById('out');
show.innerText = reader.result;;
};
reader.readAsDataURL(document.getElementById("fileInput").files[0]);
};
</script>
</head>
<body>
<input type='file' id="fileInput" onchange='readFile();'><br>
<div id='out'>
</div>
</body>
</html>
EDIT: being asked to show code, well, it's really nothing but a simple file read. The problem here is how to read files in those pseudo FS like /proc and /sys in JavaScript. Try it yourself. You will see the problem.
KB
Related
How to create a new folder on desktop by using JavaScript after a button is clicked?
My Scenario :
I want to create a button that user can click.
When user click on the button, a folder will be created on the user's desktop.
Here is the code (that I have found after a several research) that I use to try to do the scenario above.
<html>
<body>
<script>
function create() {
var fso = new ActiveXObject("Scripting.FileSystemObject");
fso.CreateFolder("C:\\Temp\\myFolder");
fso = null;
}
</script>
Create Folder: "c:\newfolder"
<form name="myForm">
<input type="Button" value="Click to Create New Folder" onClick="create()">
</form>
</body>
</html>
with javascript alone this move will create a security problem and I don't think it's possible to do. But on server side with some tool like Node.js you can by doing something like:
var fs = require("fs");
fs.mkdir("<your path>",callback);
manipulating client file with your js code often create security issues
No you can't do this using native Javascript.Native Javascript won't allow you to do any I/O in browser. But if its your necessary requirement then I would suggest you to use any server side tool like node.js. How to do in node.js?,You can get reference from #Moussa answer.
I used the library java.io.File and it worked!
var file = new java.io.File("E:\\YourNewFolder");
var path = file.mkdir();
Try This Code
createFolder("C:\\TEST\\")
function createFolder(folder){
makeDir(folder)
}
This question already has answers here:
How to read a local text file in the browser?
(23 answers)
Closed 6 years ago.
I want to read a local text file from my local html file, so I tried to follow the solution in this thread Javascript - read local text file but the suggested solution does not work for me either:
function readTextFile(file)
{
var rawFile = new XMLHttpRequest();
rawFile.open("GET", file, false);
rawFile.onreadystatechange = function ()
{
if(rawFile.readyState === 4)
{
if(rawFile.status === 200 || rawFile.status == 0)
{
var allText = rawFile.responseText;
alert(allText);
}
}
}
rawFile.send(null);
}
When I call the function readTextFile("file:///D:/test/text.txt"); no error does show up in firebug but no alert is shown neither. I use Windows und Firefox 51.0.1 (64-Bit).
I don't want to use the function FileReader() in combination with a button <input type='file' onchange='openFile(event)' ... since the text file needs to be read automatically when loading the page. So how can I make work the solution above?
Reading the thread linked it looks like others also have problems with that solution although the thread is marked as solved.
Complete HTML and JavaScript file as an example for reading client side data files. Client side files can only be accessed by the FileReader, specifying a user selected file.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function loadFile(o)
{
var fr = new FileReader();
fr.onload = function(e)
{
showDataFile(e, o);
};
fr.readAsText(o.files[0]);
}
function showDataFile(e, o)
{
document.getElementById("data").innerText = e.target.result;
}
</script>
</script>
</head>
<body>
Select file to read <input type="file" onchange="loadFile(this)">
<pre id="data"></pre>
</body>
</html>
As a general rule, it's not possible to access the local file system from JavaScript, so your code example shouldn't and couldn't work because of browser security.
However, there's the File and FileReader API which would allow you to read the contents of a file from an <input type="file" /> and is, in reality, your only option for this sort of thing - You could use FileReader.readAsText() to access the files contents. This is a good resource for further information:
https://www.html5rocks.com/en/tutorials/file/dndfiles/
The easiest way to solve my problem is to change the text file to a .js file, save it in the same folder and include it in the html file by <script src="test.js"></script>
I am using Evan plaice jquery-csv libary but I am running into a lot of trouble to get it working at the moment due to his code not updated after google code is deprecated.
I am using the one of his example where you upload a csv file and it will parse the document so that the csv file will be shown on the webpage Demo here.
I downloaded his code from github but then since the googlecode he imported is not working anymore I put the file jquery.csv.js in the same folder as the file I am using. In the jquery.csv.js, there is a function being called which is toArray in the html file. I deleted the line where it is used to be <script src="http://jquery-csv.googlecode.com/git/src/jquery.csv.js"></script> and added <script type="text/javascript" src="./jquery.csv.js"></script> However, for whatever reason it complains that toArry is not defined.
Basically the code is like this:
function printTable(file) {
var reader = new FileReader();
reader.readAsText(file);
reader.onload = function(event){
var csv = event.target.result;
var data = $.csv.toArrays(csv); << The line that has problem.
var html = '';
for(var row in data) {
html += '<tr>\r\n';
for(var item in data[row]) {
html += '<td>' + data[row][item] + '</td>\r\n';
}
html += '</tr>\r\n';
}
$('#contents').html(html);
};
reader.onerror = function(){ alert('Unable to read ' + file.fileName); };
}
In the developer console it indicates:
Uncaught TypeError: Cannot read property 'toArrays' of undefined
at FileReader.reader.onload (file:///Users/Jace/Downloads/jquery-csv-master/examples/file-handling.html:75:25)
I think you're problem is that when you removed the reference to the jquery-csv library hosted on Google Code and included your local version, you put it above the reference to jQuery itself. That's when I notice the error you're describing. The order you load in your JavaScript files does matter. When for example JavaScript code in file B.js is depending on code in A.js, A.js needs to be specified before B.js.
So basically check if the order you're specifying the files in in your HTML file is correct:
<body>
<!-- HTML... -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="jquery.csv.js"></script> <!-- The "./" is not used here -->
<script>
// Code...
</script>
</body>
Also, the ./ in front is not needed and not common. I've never used it in any case. ;)
I hope that makes it a bit more clear to you!
I got a a script wherein I want to convert the extension to another one then open it using a specific application.
For instance, I got .mht file located in my Desktop. An html file with internal javascript on it.
What I want to happen is when I open the HTML file on internet explorer and click on the hyperlink, it should convert .mht file into .docx and open it using Microsoft Word. Unfortunately, my below code does not work, if i click the hyperlink, it does opens up Microsoft Word but giving me an error message saying that the file cannot be found. Can someone assist me with this please? Thanks in advance, will much appreciated.
<HTML>
<HEAD>
<script type="text/javascript">
<!--
function openDocument(file)
{
try
{
var Word = new ActiveXObject("Word.Application")
var file;
file = file.split(".");
file = file[0]+".docx";
Word.Visible = true
Word.Documents.Open(file)
}
catch(exception)
{
if(Word)
{
alert(exception.message)
Word.Quit()
}
window.location.href = file
}
}
// -->
</script>
<TITLE>Launch Word - Local</Title>
</HEAD>
<BODY>
Summary
</BODY>
</HTML>
For security purpose, Javascript can't write on the filesystem, so it is impossible to change the extension of a file.
You should be able to do something with the new FileSystem API (check that tutorial : http://www.html5rocks.com/en/tutorials/file/filesystem/), but it is available only on Chrome (http://caniuse.com/#feat=filesystem)
EDIT:
With an ActiveX, using GetFile may work:
var fso = new ActiveXObject("Scripting.FileSystemObject");
var file = fso.GetFile("c:\\myfile.mht");
file.name = "newName.newExt";
I need to load a simple .CSV file from JS (That's not the problem here), but the "script" need to be portable (i will use it as the screen on a competition), and score data will be inserted in the CSV, and JS will be updating it's data based on the CSV.
But my problem here is: I need to run it without apache or a server, because i cant make shure the people who will use it, will have apache and also Internet... It need to be opened from a folder (Just a HTML with JS, and a file in the same folder with the .CSV)
When i try to access files from jQuery ($.get(..., ..., "jsonp"), and $.get()), Chrome output this error:
XMLHttpRequest cannot load file:PATHTOTHEFILE Origin null is not allowed by Access-Control-Allow-Origin.
This happens because the browser blocks it's content (for security reasons).
How can i "deal" with this problem, or do you know a better solution, to save some simple data and read it from JS without secury problems?
Thanks
you need to add --allow-file-access-from-files to the chrome startup command line
make a BAT file and get you users to click that to start your app
%LOCALAPPDATA%\Google\Chrome\Application\chrome.exe ^
--allow-file-access-from-files ^
http://bing.co.uk
swap out the http:// for you file url.
You can use html5 FileReader. But in this way you have to select file.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<label for="files">Path to file: </label><input type="file" id="files" name="files[]"/>
<script>
function handleFileSelect(evt) {
var files = evt.target.files;
var f;
for (var i = 0; f = files[i]; i++) {
if (!f.type.match('text.*')) {
continue;
}
var reader = new FileReader('test.html');
reader.onloadend = (function () {
return function(e) {
alert(e.target.result);
};
})();
reader.readAsText(f);
}
}
var fileSerf= document.getElementById('files');
if (fileSerf){
fileSerf.addEventListener('change', handleFileSelect, false);
}
</script>
</body>
</html>
example: http://jsbin.com/ozeyag/293/