The shortest uploader pictures!

This article reveals how you can make a very simple uploader, with code only on the client, using the image hosting API. If you are interested in a more advanced uploader with such things as resize, crop, drawing, etc. - read the article How to develop a HTML5 Image Uploader . The content of the article is notable using FormData () and Cross-Domain XHR.

I present to your attention the apploader of pictures, working in Chrome and Firefox 4, consisting of several lines of Javascript! It is based on the imgur.com API using Drag'n Drop support and Cross-Domain XMLHttpRequest . That is, you can use the API creator Imgur.com to upload images to the site from your html-page, without using the code on the server.

Here is an example of what can be done with it ( full code ):
')

function upload(file) { //    <input>   Drag'n Drop //    ? if (!file || !file.type.match(/image.*/)) return; //  ! //   FormData var fd = new FormData(); fd.append("image", file); // Append the file fd.append("key", "6528448c258cff474ca9701c5bab6927"); //   : http://api.imgur.com/ //  XHR (Cross-Domain XH,  !!!) var xhr = new XMLHttpRequest(); xhr.open("POST", "http://api.imgur.com/2/upload.json"); // Boooom! xhr.onload = function() { // ! // URL : JSON.parse(xhr.responseText).upload.links.imgur_page; } //    ,    . //    formdata xhr.send(fd); } 

That's all!