首頁 > 教學 > PHP 教學

記錄：php上傳圖片至伺服器 並返回顯示圖片地址

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
這次給大家帶來php上傳圖片至伺服器 並返回顯示圖片地址，PHP上傳儲存到檔案夾的注意事項有哪些，下面就是實戰案例，一起來看一下。


前端上傳圖片主要代碼：

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" />  <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" />。

和一般的<form>標籤相比多了一個target屬性罷了，用於指定標籤頁在哪裡開啟以及提交資料。
而如果設定為iframe的name值，即"post_frame"的話,就會在該iframe內開啟，因為CSS設定為隱藏，因而不會有任何動靜。若將display:none去掉,還會看到伺服器的返回資訊。

上傳檔案時，form表單的method、 enctype屬性必須和上面的代碼一樣，然後將target的值設為iframe的name，這樣就可以實現無重新整理上傳檔案。

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

當選擇圖片提交時，還有一個隱藏欄位，即給遠程伺服器提交圖片時，還需要提交回調路徑，好讓圖片返回給本機伺服器。（這裡我們都是用本機伺服器來進行測試）

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

遠程伺服器圖片處理

upload_action.php

<?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("上傳失敗！");        }    }}?>

回調頁面返回圖片地址到前端頁面

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

<?php  ##回調方法$img_url = $_GET['img_url'];// 返回資料給回調頁面echo "<script>window.parent.document.getElementById('cover_img_url').value='{$img_url}';</script>";?>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
php php php php php php call another php php call php php id php php include php file php index php id
相關文章
PHP教程.經驗技巧(上）
php中常用的採集函數的總結（附代碼）
php服務nginx不能使用file_get_contents的解決方案
在PHP中，%s與%d分別是什麼意思？
PHP move_uploaded_file() 函數實戰案例詳解

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More