PHP display chosen image before upload

To be clear, you are not uploading the file twice in your current solution, right? You should only be uploading once, storing it in a temporary location, displaying it on the crop page, and then sending the crop parameters back on the second action.

Traditionally, there has been no way to access the contents of a file or the value of the file upload form. There would be a security risk letting a web page know the structure of your file system. (Are you on Windows, on an admin account, ...?) Eons ago you could do this, but we got wise.

The File API introduced in HTML5 makes it possible to access files without revealing this information, and there are some cool options available to your client-side application, the key ones being the files property of a file input and URL.createObjectURL.

When you change a form, an internal representation of the file(s) in the input are exposed using fileInput.files which is a FileList object. API's exist where you can read the bytes but you want to set it as the source of an image.

Since a file is not a URL, URL.createObjectURL creates a virtual URL around the file that can only be used by your page and same-origin iframes. Set the image to this, then onload, revoke the URL and kick off your jQuery cropping plugin:

input.addEventListener('change', function () {
    preview.src = URL.createObjectURL(this.files[0]);
});

preview.addEventListener('load', function () {
    URL.revokeObjectURL(this.src);

    alert('jQuery code here. Src: ' + this.src + ', W: ' + this.width + ', H: ' + this.height);
});

Try out this jsFiddle in at least Chrome and Firefox. This is obviously not a solution for all browsers but it is a great way to enhance it for browsers that do support it.