How do I open a file stream in javascript?

To give a concrete example of what I mean:

Imagine I have an开发者_如何学C HTML page that looks like this

<div>
   <div id="filecontents">
       <!-- some html file contents -->
   </div>
   <input type="button" />
</div>

I would like to be able to click on the button, and it bring me up with a "Open or save file" dialog box.

Is this even possible?

The objective of this is, is for me to be able to open up some html, text, or a CSV using the contents of a div as a data source for the file.

You can do this using the HTML5 FileSystem APIs. A couple tutorials here:

• Reading local files in JavaScript
• Exploring the FileSystem APIs

Browser support is weak right now, but my guess is that it's the closest to what you want.

doesn't <input type="file" /> do that exact thing?

I don't understand all these answers that say this is not possible without a plugin. I would say it absolutely is possible with standard web technologies, but requires user interaction and server interaction. Of course you can't go reading or writing whatever you want on a user's computer from the web, but you can ask a user for a file (open), and give a user a file (save).

To open a file with JavaScript, use a <input type="file" />. If you want, you can use JavaScript to display the open dialog by calling the click() method on the file input (the DOM method, not the jQuery method). In the onchange handler, submit the form, read the uploaded file, and write the contents to your page.

To save a file with JavaScript, send the contents of the file to the server, prepare the file, and stream it back to the client with a content-disposition header of attachment; filename="file.txt". This header causes the file to be downloaded and saved the user's pc rather than displayed in the browser.

Do that and you've officially written your first cloud computing app!

<input type="file" /> will allow you to upload a file to the server, but you have no direct access to that file, or to the local file system, from javascript - this is a security feature.

If you want to alter the page somehow based on the contents of the file, you will have to do a round-trip: upload the file to the server, then render a new page with the changes you want, and send it back to the client.

I have seen some file-stream-like code written for javascript (i.e., a flash implementation), but they must "load" files via an ajax request and then read the data as a javascript string.

You cannot access the local filesystem from javascript because of security reasons. You can, however, receive files via drag and drop in modern browsers or use an java applet that communicates with your javascript.

EDIT: forgot about the new HTML5 file api linked by Michael Mior. Go with his answer, he's the man. If you need cross browser support, go with the java applet, its painful but works.

Not with pure JavaScript. You can't open a file dialog to save part of the HTML, for example. Even if you could, there is no way to open a local file with JavaScript for security reasons (otherwise, malicious web sites could steal all your data).

But every browser allows to write plugins (most of them are written in JavaScript), so you could try this approach.

Use this script and put it in the button that the file browser should display.

function handleFileSelect(evt) {
    var files = evt.target.files;
    for (var i = 0, f; f = files[i]; i++) {
        if (!f.type.match('image.*')) {
            continue;
        }
        var reader = new FileReader();
        reader.onload = (function(theFile) {
                return function(e) {
                    var span = document.createElement('span');
                    span.innerHTML = ['<img class="thumb" src="', e.target.result, '"
                        title = "', escape(theFile.name), '" / > '].join('
                        ');
                        document.getElementById('list').insertBefore(span, null);
                    };
                })(f); reader.readAsDataURL(f);
        }
    }
    document.getElementById('files').addEventListener('change', handleFileSelect, false);