StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>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.</p> <p>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.</p> <p><a href="https://developer.mozilla.org/en/Using_files_from_web_applications/" rel="nofollow">The File API introduced in HTML5</a> 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 <code>files</code> property of a file input and <code>URL.createObjectURL</code>.</p> <p>When you change a form, an internal representation of the file(s) in the input are exposed using <code>fileInput.files</code> which is a <code>FileList</code> object. API's exist where you can read the bytes but you want to set it as the source of an image.</p> <p>Since a file is not a URL, <code>URL.createObjectURL</code> 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:</p> <pre><code>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); }); </code></pre> <p>Try out <a href="http://jsfiddle.net/bnickel/yP7Bb/" rel="nofollow">this jsFiddle</a> 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.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload