blob and inline workers

We can also send File or Blob data using XHR. Keep in mind all Files are Blobs, so either works here. New Tricks in XMLHttpRequest2 - HTML5 Rocks

What if you want to create your worker script on the fly, or create a self-contained page without having to create separate worker files? With the new BlobBuilder interface, you can "inline" your worker in the same HTML file as your main logic by creating a BlobBuilder and appending the worker code as a string:

// Prefixed in Webkit, Chrome 12, and FF6: window.WebKitBlobBuilder, window.MozBlobBuilder
var bb = new BlobBuilder(); // thinking create a new file
bb.append("onmessage = function(e) { postMessage('msg from worker'); }"); // thinking edit the content of this inline file

// Obtain a blob URL reference to our worker 'file'.
// Note: window.webkitURL.createObjectURL() in Chrome 10+.
var blobURL = window.URL.createObjectURL(bb.getBlob()); // create a url for this inline file, blob:http://localhost/c745ef73-ece9-46da-8f66-ebes574789b1

var worker = new Worker(blobURL);
worker.onmessage = function(e) {
  // e.data == 'msg from worker'
};
worker.postMessage(); // Start the worker.

BLOB URLS The magic comes with the call to window.URL.createObjectURL(). This method creates a simple URL string which can be used to reference data stored in a DOM File or Blob object. For example:

blob:http://localhost/c745ef73-ece9-46da-8f66-ebes574789b1

Blob URLs are unique and last for the lifetime of your application (e.g. until the document is unloaded). If you're creating many Blob URLs, it's a good idea to release references that are no longer needed. You can explicitly release a Blob URLs by passing it to window.URL.revokeObjectURL():

window.URL.revokeObjectURL(blobURL); // window.webkitURL.createObjectURL() in Chrome 10+.

In Chrome, there's a nice page to view all of the created blob URLs: chrome://blob-internals/.

is it possible to preview local images before uploading them via a form

function createObjectURL(object) {
    return (window.URL) ? window.URL.createObjectURL(object) : window.webkitURL.createObjectURL(object);
}

function revokeObjectURL(url) {
    return (window.URL) ? window.URL.revokeObjectURL(url) : window.webkitURL.revokeObjectURL(url);
}

function myUploadOnChangeFunction() {
    if(this.files.length) {
        for(var i in this.files) {
            var src = createObjectURL(this.files[i]);
            var image = new Image();
            image.src = src;
            // Do whatever you want with your image, it's just like any other image
            // but it displays directly from the user machine, not the server!
        }
    }
}