HTML5 / JavaScript：打开文本文件，加载到文本区域/将文本区域内容保存到文本文件

Question

I want to do two things in my browser:

• Load a text file into a textarea (has to be choosen via dialog box)
• Save the content of a textarea into a text file (has to be choosen via dialog box again)
• Load a video file and grab the file path to use it with a video player ( 1 )

I've been looking around for a while on the inte.net. There are some solutions for IE only via ActiveXObjects, which I can't use (IE, seriously?). HTML5 file API has limited usability because I can't access the selected file's path.

I also found save dialogs for textareas, but they ignored line breaks for some strange reason and I don't know how to fix that, if possible at all.

So here are my requirements and options:

• Support for FF and Chrome
• JavaScript, HTML5 (and PHP, if it has to be)
• possibly Silverlight, but I'm not very familiar with it and may only copy and paste:-/
• it has to work on Mac as well

Answer 1

There is a dirty hack that gets the job done without resorting to Flash or Silverlight, or using a server, and it works in most browsers:

var uriContent = "data:application/octet-stream," + encodeURIComponent(fileContentsAsString);
window.open(uriContent, 'Save Your File');

Answer 2

JS runs in a sandbox. That means: no access to files on the filesystem. HTML5 file API is the first „native” (as in not flash nor activex) attempt to grant limited access to the users file system.

Answer 3

The File API is HTML that would allow you to access data, after which you can manipulate binary blobs in JavaScript, but as written this is not possible in pure JS and HTML based on your requirements.

The big blocker is "saving to a text file." The only way I've been able to do this is by opening up an iFrame that calls a server side language (such as PHP) to set the content type in the header to a type that prompts a download.

Flash and Silverlight are "client" technologies that run outside of the sandbox, which sounds like your only option at this point.

Answer 4

My ideas:

Load a text file: Use a normal HTML upload form (if you want to script, maybe submit it via AJAX)

Save a text file: Use a textarea and upon submitting, create the file server-side and then offer it to download. (As mentioned before, client-side scripts do not have access to the computer's file system)

Load a video file: Is the video on the server already? Otherwise will need an upload just like the text file. Then use a flash plugin to play the file from the server (the URI should be known to you then)

All of these are relatively simple to achieve using PHP. Line breaks from a textarea stay as \n in PHP. Tutorials: Form handling in PHP , File upload in PHP

Edit: Since PHP runs server-side you should not run into a lot of problems because of browser diversity. Alternatively, you can do all of these in Flash or Silverlight as well, although from my point of view that takes more learning and is less comfortable for the user.