這次帶給大家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標籤(這裡我們將其隱藏),否則將會找不到要在頁面顯示的地方1dcd7668715d52fa70e9dc15513c5be0。
和一般的ff9c23ada1bcecdd1a0fb5d5a0f18437標籤相比多了一個target屬性罷了,用於指定標籤頁在哪裡打開以及提交資料。 而如果設定為iframe的name值,即"post_frame"的話,就會在該iframe內打開,因為CSS設定為隱藏,因而不會有任何動靜。若將display:none去掉,也會看到伺服器的回傳訊息。
<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> "; ?>相關推薦:
##
以上是記錄:php上傳圖片至伺服器 並傳回顯示圖片位址的詳細內容。更多資訊請關注PHP中文網其他相關文章!