最短画像アップローダー！

この記事では、画像ホスティングAPIを使用して、クライアント上でのみコードを使用して、非常にシンプルなアップローダーを作成する方法を示します。 サイズ変更、トリミング、ペイントなどの機能を備えた、より高度なアップローダーに興味がある場合 -記事「HTML5 Image Uploaderの開発方法」をご覧ください 。 記事の内容は、FormData（）およびクロスドメインXHRを使用して注目に値します。



ChromeとFirefox 4で動作する、数行のJavascriptで構成される画像アプリローダーをご紹介します！ これは、 ドラッグアンドドロップサポートとクロスドメインXMLHttpRequestを使用したimgur.com APIに基づいています 。 つまり、 Imgur.comクリエーターAPIを使用して、サーバー上のコードを使用せずにHTMLページからサイトに画像をアップロードできます。



これを使ってできることの例（ 完全なコード ）：

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); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

以上です！