Javascript image uploader

How do I implement an image uploader in javascript with a crop utlility. How do u submit the image file via AJAX?开发者_JAVA技巧 Is the solution cross-domain compatible?

To implement an image upload widget with crop functionality you will have to:

1. Upload the image to the Server Uploading files from AJAX applications is a topic on its own. It is best to start with one of the many existing AJAX file upload widgets.

2. Store the image on the server After the image has been uploaded to the server, the image URL has to be passed to the crop widget.

3. Specify the crop region With the image URL at hand you can write a little crop widget, which lets you define the crop region of the image.

4. Crop the image on the server After the user has defined the crop region, the crop data has to be send to the server using an AJAX-call. On the server the image has to be cropped using one of the many image manipulation tools (e.g. ImageMagick).

If you are using jQuery you you may take a look at the jCrop plugin.

To answer the last part of your question - you cannot upload a file using an XmlHttpRequest, so "pure AJAX" won't match here. What you can do is

<FORM method="post" enctype="multipart/form-data" 
     action="serverscript.cgi" target="hiddenframe>
 <input type="file"....
</FORM>
<iframe id="hiddenframe" name="hiddenframe" style="display:none"></iframe>

You will then have to catch the "onload" event of the document in the iframe to know when your document is up there.

If you'd like to use Prototype you may be interested in the jsCropperUI plugin. It has lots of features, and the code is pretty neat.

http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/