上傳圖片到遠程服務器並返回圖片地址到本地顯示

時間 2019-11-15

標籤上傳圖片遠程服務器返回地址本地顯示简体版

原文原文鏈接

本示例將演示一個簡單的上傳圖片到遠程服務器，而後生成圖片路徑後經過提交的回調路徑返回給本地服務器，最後將圖片地址顯示在前端頁面。php

本項目應用三個文件，即前端選取圖片的頁面，而後提交圖片到遠程服務器處理文件，返回前端頁面的回調文件。html

###1、前端上傳圖片頁面 upload_test.html前端

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Upload Image</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
     <!--注意這裏的iframe標籤-->
     <iframe  name="post_frame" style="display:none;"> </iframe>

      <form id="photo_upload" action="upload_action.php" method="post" target="post_frame"  enctype="multipart/form-data">              
        <table width="100%" cellspacing="0" cellpadding="0" border="0" >
          <tbody>
            <tr>  
              <th style="border-bottom:1px solid #D1E0EB;text-align: right;">主題封面圖：</th>
              <td style="border-bottom:1px solid #D1E0EB">
                <input type="file" id="file" name="opus" value="" width="200" /> <input style=" height: 40px;width: 45px;" type="submit" value="上傳" name="submit" />&nbsp;&nbsp;<span> 圖片格式 jpg  jpeg gif  png  </span>
                <input type="hidden" name="callbackUrl" value="http://localhost/url_test/callback.php"  />
              </td>
            </tr>
          </tbody>
        </table>
      </form>

        <table width="100%" cellspacing="0" cellpadding="0" border="0" >

           <tr>
              <th style="border-bottom:1px solid #D1E0EB;text-align: right;">封面圖URL：</th>
              <td style="border-bottom:1px solid #D1E0EB">
                <input type="text" id="cover_img_url" name="cover_img_url" size="120" readonly="readonly" /><span>* 
                <span style=" height: 100px;" id="show_img"></span></span>
              </td>
            </tr>
      </table>
 </body>
</html>

這裏須要注意當回調頁面返回圖片地址到前端頁面時，須要iframe標籤（這裏咱們將其隱藏），不然將會找不到要在頁面顯示的地方 <input type="text" id="cover_img_url" name="cover_img_url" size="120" readonly="readonly" />。jquery

和通常的<form>標籤相比多了一個target屬性罷了，用於指定標籤頁在哪裏打開以及提交數據。而若是設置爲iframe的name值，即"post_frame"的話,就會在該iframe內打開，由於CSS設置爲隱藏，於是不會有任何動靜。若將display:none去掉,還會看到服務器的返回信息。服務器

上傳文件時，form表單的method、 enctype屬性必須和上面的代碼同樣，而後將target的值設爲iframe的name，這樣就能夠實現無刷新上傳文件。post

<iframe  name="post_frame" style="display:none;"> </iframe>

當選擇圖片提交時，還有一個隱藏域，即給遠程服務器提交圖片時，還須要提交回調路徑，好讓圖片返回給本地服務器。（這裏咱們都是用本地服務器來進行測試）測試

<input type="hidden" name="callbackUrl" value="http://localhost/url_test/callback.php"  />

###2、遠程服務器圖片處理 upload_action.phpurl

<?php
/**
 * 圖片上傳處理
 * User: CorwienWong
 * Date: 16-06-15
 * Time: 00:33
 */
header("Content-type:text/html;charset=utf-8");

// 配置文件須要上傳到服務器的路徑，須要容許全部用戶有可寫權限，不然沒法上傳成功
$uploadPath = 'uploads/';

// 獲取提交的圖片數據
$file = $_FILES['opus'];

// 獲取圖片回調路徑
$callbackUrl = $_POST['callbackUrl'];

if($file['error'] > 0)
{

    $msg = '傳入參數錯誤' . $file['error'] . "  ";
    exit($msg);
}
else
{

   // chmod($uploadPath, 0666);

    if(file_exists($uploadPath.$file['name'])){
       $msg = $file['name'] . "文件已經存在！";
       exit($msg);
    }
    else
    {
        if(move_uploaded_file($file['tmp_name'], $uploadPath.$file['name']))
        {

          $img_url = "http://localhost/url_test/".$uploadPath.$file['name'];
          $img_url = urlencode($img_url);

          $url = $callbackUrl."?img_url={$img_url}";

          // 跳轉
          header("location:{$url}");
          exit();

        }
        else
        {
          exit("上傳失敗！");

        }

    }

}

圖片上傳到到該頁面後，保存並返回圖片地址給回調頁面。spa

###3、回調頁面返回圖片地址到前端頁面code

回調頁面獲取到遠程服務器傳來的圖片地址後，通過"window.parent.XXX"返回給前端頁面。
callback.php

<?php
  ##回調方法

$img_url = $_GET['img_url'];

// 返回數據給回調頁面

echo "
<script>window.parent.document.getElementById('cover_img_url').value='{$img_url}';</script>
";

若是咱們的前端頁面upload_test.html沒有iframe標籤，則不會返回找到ID爲「cover_img_url」的輸入框的值，會跳轉到空白頁。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。