PHP-Ajax實作非同步上傳圖片到新浪圖床

透過非同步上傳圖片到新浪圖床，並且取得圖片外鏈位址。

一、填坑

1.頁面中必須引用Jquery庫，否則沒辦法實作非同步請求，這裡使用的百度的Jquery庫。

<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

2.相關資料連接

新浪圖床上傳接口源碼

有部分人拿到這個接口源碼並不會使用，起初我也不是很明白，也是慢慢搞懂的，感謝介面作者的分享。

相關推薦：《PHP教學》

二、實作程式碼

1.圖床介面源碼，只需要修改源碼裡面的帳號密碼即可，其它不用修改。

檔案名稱：imgfile.php

<?php
/**
 * 上传图片到微博图床
 * @author Youngxj & mengkun & 阿珏
 * @param $file 图片文件/图片url
 * @param $multipart 是否采用multipart方式上传
 * @return 返回的json数据
 * @code  200:正常;201:错误;203:cookie获取失败;404:请勿直接访问
 * @ps    图片尺寸可供选择:square、thumb150、orj360、orj480、mw690、mw1024、mw2048、small、bmiddle、large 默认为:thumb150,请自行替换
 */
header("Access-Control-Allow-Origin:*");
header(&#39;Content-type: application/json&#39;);
error_reporting(0);
//设置新浪帐号密码------------------------
$sinauser = &#39;1111111111&#39;;    //账号
$sinapwd = &#39;2222222222&#39;;//密码
//--------------------------------------
if (!is_file(&#39;sina_config.php&#39;)) {
  CookieSet(&#39;SUB;&#39;,&#39;0&#39;);
}
include &#39;sina_config.php&#39;;
if (time() - $config[&#39;time&#39;] >20*3600||$config[&#39;cookie&#39;]==&#39;SUB;&#39;) {
  $cookie = login($sinauser,$sinapwd);
  if($cookie&&$cookie!=&#39;SUB;&#39;){
    CookieSet($cookie,$time = time());
  }else{
    return error(&#39;203&#39;,&#39;获取cookie出现错误，请检查账号状态或者重新获取cookie&#39;);
  }
}
if ($_SERVER[&#39;REQUEST_METHOD&#39;] == &#39;OPTIONS&#39;) {exit;}
$type=$_GET[&#39;type&#39;];
if($type==&#39;multipart&#39;){
  $multipart = true;
  $file = $_FILES["file"]["tmp_name"];
}elseif(isset($_GET[&#39;img&#39;])){
  $multipart = false;
  $file = $_GET[&#39;img&#39;];
}else{
  return error(&#39;404&#39;,&#39;请勿直接访问&#39;);
}
if (isset($file) && $file != "") {
  include &#39;sina_config.php&#39;;
  $cookie = $config[&#39;cookie&#39;];
  echo upload($file, $multipart,$cookie);
}else{
  return error(&#39;201&#39;,&#39;上传错误&#39;.$file."结尾");
}
function CookieSet($cookie,$time){
  $newConfig = &#39;<?php 
  $config = array(
    "cookie" => "&#39;.$cookie.&#39;",
    "time" => "&#39;.$time.&#39;",
  );&#39;;
  @file_put_contents(&#39;sina_config.php&#39;, $newConfig);
}
function error($code,$msg){
  $arr = array(&#39;code&#39;=>$code,&#39;msg&#39;=>$msg);
  echo json_encode($arr);
}
/**
     * 新浪微博登录(无加密接口版本)
     * @param  string $u 用户名
     * @param  string $p 密码
     * @return string    返回最有用最精简的cookie
     */
function login($u,$p){
  $loginUrl = &#39;https://login.sina.com.cn/sso/login.php?client=ssologin.js(v1.4.15)&_=1403138799543&#39;;
  $loginData[&#39;entry&#39;] = &#39;sso&#39;;
  $loginData[&#39;gateway&#39;] = &#39;1&#39;;
  $loginData[&#39;from&#39;] = &#39;null&#39;;
  $loginData[&#39;savestate&#39;] = &#39;30&#39;;
  $loginData[&#39;useticket&#39;] = &#39;0&#39;;
  $loginData[&#39;pagerefer&#39;] = &#39;&#39;;
  $loginData[&#39;vsnf&#39;] = &#39;1&#39;;
  $loginData[&#39;su&#39;] = base64_encode($u);
  $loginData[&#39;service&#39;] = &#39;sso&#39;;
  $loginData[&#39;sp&#39;] = $p;
  $loginData[&#39;sr&#39;] = &#39;1920*1080&#39;;
  $loginData[&#39;encoding&#39;] = &#39;UTF-8&#39;;
  $loginData[&#39;cdult&#39;] = &#39;3&#39;;
  $loginData[&#39;domain&#39;] = &#39;sina.com.cn&#39;;
  $loginData[&#39;prelt&#39;] = &#39;0&#39;;
  $loginData[&#39;returntype&#39;] = &#39;TEXT&#39;;
  return loginPost($loginUrl,$loginData); 
}
/**
     * 发送微博登录请求
     * @param  string $url  接口地址
     * @param  array  $data 数据
     * @return json         算了，还是返回cookie吧//返回登录成功后的用户信息json
     */
function loginPost($url,$data){
  $tmp = &#39;&#39;;
  if(is_array($data)){
    foreach($data as $key =>$value){
      $tmp .= $key."=".$value."&";
    }
    $post = trim($tmp,"&");
  }else{
    $post = $data;
  }
  $ch = curl_init();
  curl_setopt($ch,CURLOPT_URL,$url); 
  curl_setopt($ch,CURLOPT_RETURNTRANSFER,1); 
  curl_setopt($ch,CURLOPT_HEADER,1);
  curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
  curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
  curl_setopt($ch,CURLOPT_POST,1);
  curl_setopt($ch,CURLOPT_POSTFIELDS,$post);
  $return = curl_exec($ch);
  curl_close($ch);
  return &#39;SUB&#39; . getSubstr($return,"Set-Cookie: SUB",&#39;; &#39;) . &#39;;&#39;;
}
/**
 * 取本文中间
 */
function getSubstr($str,$leftStr,$rightStr){
  $left = strpos($str, $leftStr);
  //echo &#39;左边:&#39;.$left;
  $right = strpos($str, $rightStr,$left);
  //echo &#39;<br>右边:&#39;.$right;
  if($left <= 0 or $right < $left) return &#39;&#39;;
  return substr($str, $left + strlen($leftStr), $right-$left-strlen($leftStr));
}
function upload($file, $multipart = true,$cookie) {
  $url = &#39;http://picupload.service.weibo.com/interface/pic_upload.php&#39;.&#39;?mime=image%2Fjpeg&data=base64&url=0&markpos=1&logo=&nick=0&marks=1&app=miniblog&#39;;
  if($multipart) {
    $url .= &#39;&cb=http://weibo.com/aj/static/upimgback.html?_wv=5&callback=STK_ijax_&#39;.time();
    if (class_exists(&#39;CURLFile&#39;)) {     // php 5.5
      $post[&#39;pic1&#39;] = new \CURLFile(realpath($file));
    } else {
      $post[&#39;pic1&#39;] = &#39;@&#39;.realpath($file);
    }
  } else {
    $post[&#39;b64_data&#39;] = base64_encode(file_get_contents($file));
  }
  // Curl提交
  $ch = curl_init($url);
  curl_setopt_array($ch, array(
    CURLOPT_POST => true,
    CURLOPT_VERBOSE => true,
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_HTTPHEADER => array("Cookie: $cookie"),
    CURLOPT_POSTFIELDS => $post,
  ));
  $output = curl_exec($ch);
  curl_close($ch);
  // 正则表达式提取返回结果中的json数据
  preg_match(&#39;/({.*)/i&#39;, $output, $match);
  if(!isset($match[1])) return error(&#39;201&#39;,&#39;上传错误&#39;);
  $a=json_decode($match[1],true);
  $width = $a[&#39;data&#39;][&#39;pics&#39;][&#39;pic_1&#39;][&#39;width&#39;];
  $size = $a[&#39;data&#39;][&#39;pics&#39;][&#39;pic_1&#39;][&#39;size&#39;];
  $height = $a[&#39;data&#39;][&#39;pics&#39;][&#39;pic_1&#39;][&#39;height&#39;];
  $pid = $a[&#39;data&#39;][&#39;pics&#39;][&#39;pic_1&#39;][&#39;pid&#39;];
  if(!$pid){return error(&#39;201&#39;,&#39;上传错误&#39;);}
  $arr = array(&#39;code&#39;=>&#39;200&#39;,&#39;width&#39;=>$width,"height"=>$height,"size"=>$size,"pid"=>$pid,"url"=>"http://ws3.sinaimg.cn/thumb150/".$pid.".jpg");
  return json_encode($arr);
}
?>

2.簡單的圖片檔案上傳頁面（無需php環境）

檔案名稱：upfile.html

    
    
    
    
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

显示结果








<script>
    function upload() {
        var formData = new FormData();
        
        /*第一个参数file不要修改，这个和imgfile.php里面file参数对应(会php的看下就知道了)
        *第二个参数取的是上传的图片，如果要修改只需要改#imgfile，这个是上传图片选择框的id，用来选择你要通过那个文件选择框上传
        */
        formData.append(&#39;file&#39;, $("#imgfile")[0].files[0]);
        $.ajax({
           // url: "http://api.916b.cn/upfile.php?type=multipart",
           //上面是我服务器上的接口文件，需要使用自己的用下面的
           url: "imgfile.php?type=multipart",//imgfile.php文件和本页面放在一个文件夹中
            type: "post",
            data: formData,
            contentType: false,
            processData: false,
            mimeType: "multipart/form-data",
            dataType:&#39;json&#39;,
            success: function (data) {
            /*返回的data数据是这样的
             * {"code":"200","width":144,"height":144,"size":6359,"pid":"006m7Gcrly1g260lwasnzj304004074e","url":"http:\/\/ws3.sinaimg.cn\/thumb150\/006m7Gcrly1g260lwasnzj304004074e.jpg"}
             */
           
            /*这里有个坑，如果上面不定义dataType:&#39;json&#39;，下面这行就不能注释掉，否则在后面取数据时候会出错。
             是因为定义dataType:&#39;json&#39;，则后面的数据就按照JSON类型处理，否则会按照字符串处理，数据值就取不到，就要执行下面一段代码，将字符串转换成JSON数据
            */
             //data = jQuery.parseJSON(data);//将data处理成JSON数据
             
                $("#result").html(data["url"]);//取url的值，并通过id为result的div显示到页面上
                console.log(data);//控制台输出data,可以F12查看
            },
            error: function (data) {
                alert(&#39;接口请求失败&#39;)
            }
        });
    }
</script>

三、圖

1.選擇一張圖片

#2.點選上傳後顯示的

#

以上是PHP-Ajax實作非同步上傳圖片到新浪圖床的詳細內容。更多資訊請關注PHP中文網其他相關文章！