記錄：php上傳圖片至伺服器 並返回顯示圖片地址
阿新 • • 發佈：2019-02-18
前端上傳圖片主要程式碼：
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>
";
?>