FileAPI+Prototype.js+PHPでImgurアップロード

カテゴリ：Code Archives, HTML/CSS/JS, PHP 投稿日：2016年11月5日

Cutls.comは度々アップデートを続けています。
今回は作成文書に画像を入れたいと思いつつもサーバーの容量の関係もあり頭を悩ませた結果、Imgurに上げてしまえという結論に至りました。

次に実際のコードを載っけときますが実際に使用したコードを改変してるため動かないかもしれません！
Imgurは匿名で無制限にアップロードできるサービスです。採算がとれるのかどうかは知りませんが。
とりあえずRegister – Imgurdで登録して、ログインしてAdd Client – Imgurを埋めていく。Anonymous usage without user authorizationを選択してください。後は適当に。

Submitして出てきたClient IDをメモして次のステップ。
HTMLを書く。Prototype.jsが必要です。(無くてもなんとかなりますが)

<input type="file" onchange="img(this);">
<script src="prototype.js"></script>
<script src="post.js"></script>

ファイルを選ぶとすぐに実行されます。
次はJS。post.js

function img(imgf){ 
  if(!imgfe.files.length) return;
		var file=imgf.files[0];
		var pdata=new FileReader();
		pdata.onload=function(pic) {
			var b64=pic.target.result;
			//Base64エンコード
			imgup(b64);
		}
pdata.readAsDataURL(file);
}
function imgup(b64){
var xurl="upload.php";
new Ajax.Request(xurl, {
		method: "post",
		parameters: { "img" : b64},
		asynchronous: true,
		onComplete: function(response) {
		var mess=response.responseJSON;
		//JSONをObjectで取得
		var data="data";
		var data=mess[data];
		var link="link";
		var link=mess[link];
		alert(link);
		//リンクがalertされるはず
		}
	});
}

次はPHPで。upload.php

<?php
header("Content-Type: application/json; charset=utf-8");//誰がなんと言おうと俺はJSONだ
  $cid="";//メモったClient ID
  $img=$_POST[img];
  $imgar=explode(";",$img);
  $img=$imgar[1];
  $imgar=explode(",",$img);
  $img=$imgar[1];
  //最初にMIME;base64,という無駄があるので省く。多分一気にできますが
  $post   = array('image' => $img);
  //ImgurはBase64でアップロードします。
  $timeout = 30;
  $curl = curl_init();
  curl_setopt($curl, CURLOPT_POST, 1);
  curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
  curl_setopt($curl, CURLOPT_TIMEOUT, $timeout);
  curl_setopt($curl, CURLOPT_POSTFIELDS, $post);
  curl_setopt($curl, CURLOPT_URL, 'https://api.imgur.com/3/image.json');
  curl_setopt($curl, CURLOPT_HTTPHEADER, array('Authorization: Client-ID ' . $cid));
  $out = curl_exec($curl);
  curl_close ($curl);
  $json = json_decode($out,true);
 print_r($json);

?>

これで多分上がります。