Is it possible to append the content of an uploaded text file to a <table>, and not its name? I guess, I want to open the uploaded txt file, parse and added the content to the table on the same page. Here is where I'm at right now. :(
Thanks so much in advance.
Sadly you can't do this. In order to do something like this you need some server side code.
The main issue is one of security -- local javascript can't look at local files. The upload button can only send the file to the server not the local javascript.
Typically people solve this problem using flash which does not have the same security requirements -- or a local program.
Reading the contents of a file selected by an upload input will be possible with the File API, which has some support in newer browsers (Firefox and more recently Chrome).
On browsers that don't provide this, you'd have to post the form and have the server echo out the content of the file for the script to pick up. (eg post form to iframe and have server response with script to call parent.callback('file content')).
Related
I am trying to make a simple form submission in a GitHub Repository.
Basically what I want to do is take the input of an HTML Tag and then store it in another local file such as another HTML file or a text file without a back-end.
I understand that there was a saveAs function within JavaScript (however I read that it had been discontinued due to security reasons). Once I get the data stored in a file I would call it in the HTML page with the < embed > tag to show it on the page. So basically I want the Input on the page, and then when it is appended to the file, to show up on the same page again when the page is refreshed. My reason for doing this is to make a make-shift Google WorkSpace-like page for my production studio.
Here's a visual of what I want to do:
HTML PAGE:
Embedded File Contents (externalfile.html) Go Here.
Input: Input Goes Here
Submit
When Submit is pressed, it takes the contents within the "Input Goes here" box and appends it to "externalfile.html", then when the page is refreshed, it shows the updated content above the form.
I am not well-versed in JavaScript but I know JQuery a Good bit from making a few websites with Wix, but I do not know much native JavaScript nor it's functions. Any advice would be helpful. :) Thank you. I would be adding multiple input boxes and such on the page.
Hello and welcome to StackOverflow!
Now, if I got your question right, you want to append something to a file and read this file without using any backend? Then I must disappoint you, because there is no way JavaScript allows this, since it would be a tremendous security risk. The reason is, because any malicious JavaScript code on any webpage then could not only create malware files on your PC and dragging it to some start up folder, but also they would be able to read all the files and documents on your machine (without your knowledge!). So I think you see where the problem is.
For your task I recommend you using some kind of backend (i.e. NodeJS, PHP) and make things work with API requests and asynchronous JavaScript. Or you could serve your site with an ExpressJS backend and statically fetch the request and append its contents to a file. Then of course send an HTML file back with all the inputs the user made. The choice is yours.
Cheers
How do I get the actual text content of a .php file using javascript without executing it on the server?
Also, I would like to know if there is a way to read the text content of any other file other than .php using javascript.
If you are using a webserver like Apache or Nginx then they will execute the .php file for you. There is no way around this because you shouldn't allow anyone to download your php source code, which is what you're trying to do with Javascript.
If your javascript needs some output then have your .php render the data javascript needs. Then to load this content via Javascript can be as simple as an ajax call, eg: http://api.jquery.com/jquery.ajax/
I realize this is a very very old question. But it has a very simple solution, without re-configuring the php server, assuming,
One wants to look at a few files, either permanently or during short time periods during development.
It is not a security problem if it is viewed by others on the local net or wan, wherever you also view this. (This risk can also be minimized, see the end.)
Your server is already configured to serve .txt files as plain text
Say the file of interest is x.php,
make a symbolic link, with a text file extension
ln -s x.php newname.txt
Now you can view the file at the same site as newname.txt.
Minimizing security risk. If your server is already configured to not allow directory browsing, then by making the newname somewhat long, it is less likely anybody else will easily find the name to view it.
I'm trying to link this page http://www.bauer.uh.edu/parks/f1471m.htm to my text editor ( text mate) with a mac.
I even copied the code and pasted it into an HTML file, and made a .js file (the one I'm trying to use to practice with) in the same folder and to use the local tag with no success.
I tried using src="http://www.bauer.uh.edu/parks/f1471m.htm" with no luck.
am I doing something wrong?
I'm making a few assumptions here...
From what you're describing, I think you're trying to directly edit the file. Unless you have write access on that server, what you're doing isn't going to work. Some web development software will allow you to do this, but most text editors don't.
Can you work on the file locally (on your computer's file system) and upload it to the server through FTP?
Many browsers give you the ability to save a page locally these days. That would set up the proper structure for you on your own machine. (FireFox can do this using Save Page)
I want my browser to open my local images and to place them at the center of my browser. The only way I could think of is by coding an HTML+CSS file, but I don't want to use PHP or ASP.NET cause I don't want to run a server. So javascript is a solution to this.
So, is there a way for an HTML+Javascript file to display a list of my local files, and after clicking at the image I want, the image name to be saved to a variable in order to display this image to my html with img src using the css style I want?
Thanks in advance!
This is only possible with some kind of special file system that is based on XML (I've seen this once)
You need to create a XML index file (or some other format you can get with XMLHTTP Web Requests and parse with JavaScript) that contains all information about the images (System location, maybe some kind of ID, alt/title attributes etc.)
Then you load that file with a XMLHTTP Request, parse the data and print it as HTML with correct links to the images.
JavaScript itself can't read the file system, it can request single files only
Accessing local filesystem from Javascript inside a browser is a pretty taboo thing mostly. See this related question.
I am taking a text file from user and then posting that file back to the browser using ajax storing the content in db and then showing the content back to user page using Jquery post response.
Now i want to something like this..
Read the text file from the user computer using javascript. Display the content and when he submits the page I will save the values.
Can't be done in pure JS for security reasons. You would need to have the user upload the file to your server, and fetch the contents back through Ajax.
If you use Flash or Java, you should be able to gain direct access to the file. If you speak Flash/Actionsript, maybe SWFUpload's source code (especially the new client-side resizing functions) can serve as an inspiration.
Update: This blog entry should help. Read and write local files with Flash Player 10
Update: To elaborate on the "upload and fetch" thing, if you do the uploading in an IFRAME, you could even have the upload script simply output the text file's contents. Because the iframe belongs to your domain, you will be able to retrieve its contents via JavaScript when the upload has finished. As long as you send a content-type: application/text it should be fairly safe from any malicious attacks.
If you're ok with Firefox 3.6 support only check out https://developer.mozilla.org/en/Using_files_from_web_applications, otherwise you should use Flash, Java or silverlight for this.
You won't be able to read a file in user's computer due to security issues.
Reading client files in javascript is possible with the new File API available in modern browsers. Check this site and its code: http://www.readfileonline.com/
However, before reading file contents in javascript, the user must explicitly select the files it allows to read. This is a security feature of the standard.