通過Imgur上傳圖片並回傳網址
2016-12-16

最近正在努力架設有名故事館。因為伺服器空間不太夠,如果又提供使用者上傳圖片的功能,肯定是吃不消。某日,我在 Meteor 上發現他們上傳圖片時,直接傳到imgur再回傳網址,我也想嘗試使用,卻處處碰壁。

前言

像我這種半吊子,一定是先去找別人的成品來抄。後來我找到一個國外網站:Uploading Images Using Imgur API in PHP,經過一翻的努力得來的卻是「Imgur is temporarily over capacity.」的錯誤訊息。有時候的確能上傳成功,但有時總是不行,接著就展開這歷時一個多月的艱辛。

STEP1:註冊 Imgur App

首先先進入App 註冊頁,在「Authorization type」的地方選擇第三個:「Anonymous usage without user authorization」

註冊完後我們只需要client ID

STEP2:製作上傳處理程式 upload.php

    <?php
  • $i=1;
  • $img=$_FILES['img'];
  • $filename = $img['tmp_name'];
  • $client_id="
    自己的client id
    ";
  • $handle = fopen($filename, "r");
  • $data = fread($handle, filesize($filename));
  • $pvars = array('image' => base64_encode($data));
  • $timeout = 30;
    do{
  • $curl = curl_init();
  • curl_setopt($curl, CURLOPT_URL, 'https://api.imgur.com/3/image');
  • curl_setopt($curl, CURLOPT_TIMEOUT, $timeout);
  • curl_setopt($curl, CURLOPT_HTTPHEADER, array('Authorization: Client-ID ' . $client_id));
  • curl_setopt($curl, CURLOPT_POST, 1);
  • curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
  • curl_setopt($curl, CURLOPT_POSTFIELDS, $pvars);
  • $out = curl_exec($curl);
  • curl_close ($curl);
  • $pms = json_decode($out,true);
  • $url=$pms['data']['link'];
  • if($url!=""){
  • echo $url;
  • $i=0;
  • }
    }while($i!=0);
    ?>

為什麼要循環呢?真相只有一個!那就是上傳成不成功是靠運氣的,如果沒有用循環就有機會回傳錯誤:「Imgur is temporarily over capacity.」!我這一步卡關超久,網路上完全沒有解答!我一直以為是我申請出錯了,弄了好幾次!我稱這個叫「暴力上傳」,不過這是目前我所知的唯一解了!

STEP3:製作上傳表單 (FORM)

這個Code也是那國外網站提供的:

    <form action="
    upload.php
    " enctype="multipart/form-data" method="POST">
  • Choose Image : <input name="img" size="35" type="file"/><br/>
  • <input type="submit" name="submit" value="Upload"/>
    </form>

示範:http://had.name/set/upload/

STEP3+:製作上傳表單 (AJAX)

Form上傳對我的故事館來說真的是沒有任何屁用,於是我又研究了Ajax上傳,這裡也是困難重重啊!參考了對岸的網站:通過jQuery Ajax使用FormData對象上傳文件

    <form id="profile-form" enctype="multipart/form-data">
  • <input name="img" type="file" id="file"/>
  • <button type="button" id="info-button">更新</button>
    </form>
      //回傳後網址顯示於此
      網址:<span id="url"></span>
        <script>
      • $(function(){
      • $("#file").change(function(){
      • $.ajax({
      • async: false,
      • cache: false,
      • contentType: false,
      • processData: false,
      • data: new FormData($('#profile-form')[0]),
      • type: "POST",
      • url: "
        /upload.php
        ",
      • success:function(data){
      • data=data.replace(/http:\/\//, "");
      • $("#url").val(data);
      • }
      • });
      • });
      • });
        </script>

      記得在<head>和</head>間載入jQuery

        <script type="text/javascript" src="//www.google.com/jsapi"></script>
        <script type="text/javascript" language="javascript">google.load("jquery", "1.3");</script>

      如果有哪裡有打錯的話,歡迎各位留言。


      廣告